Hexo: Environment Variables

[dtaylor7]

There is no way to read environment variables.

I.e in heroku i have two environments: staging & live. Each environment has its own keys for analytics. I have set these as "Config Vars" but <% env.key %> returns undefined?

[skirunman]

You can probably use the data files feature for this https://hexo.io/docs/data-files.html

Instead, we have set up an automated build process using a CI tool, Bitbucket Pipelines in our case, but any such tool could work. During the build process and before we do a hexo generate we copy the appropriate staging or live config files from a top level .env directory to replace the _config.yml and themes/yourtheme/_config.yml files with the correct versions for staging or live. This way we can have separate GA IDs, different URLs, other private keys, etc. for dev, staging and live. Works well for us.

If I ever get time I'll write up a blog post on how we build and deploy our Hexo website.

[PieterO]

I've tried as well, I've not found a good way of doing them

Have you written the blogpost?

[bennycode]

I am also interested in using environment variables within my _config.yml, so that I can use them for deployments:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://${GH_TOKEN}@github.com/bennyn/bennyn.github.io.git
  branch: master

@skirunman Do you have a workaround for using env variables within _config.yml? I saw that some people are using the sed command to modify the file on their build systems before running hexo deploy.

[skirunman]

As I said we use Atlassian Bitbucket Pipelines to build and deploy our website to Amazon AWS S3 with Cloudfront for our production deployment. Our bitbucket-pipelines.yml looks something like this. Code is deployed on git push to either staging or production branches. We use gulp to bundle and clean things up.

image: node:8

pipelines:
  branches:
    staging:
      - step:
          script:
            - npm --version
            - node --version
            - npm install
            - npm install hexo-cli -g
            - cp .env/staging.robots.txt source/robots.txt
            - cp .env/staging_theme_config.yml themes/clozer/_config.yml
            - cp .env/staging_config.yml _config.yml
            - npm run clean
            - npm run generate
            - npm run gulp
            - apt-get update && apt-get install -y python python-pip python-dev
            - python --version
            - pip --version
            - pip install awscli --upgrade
            - aws --version
            - aws s3 sync public s3://our-staging-site.com --delete
    production:
      - step:
          script:
            - npm --version
            - node --version
            - npm install
            - npm install hexo-cli -g
            - cp .env/production_theme_config.yml themes/clozer/_config.yml
            - cp .env/production_config.yml _config.yml
            - npm install hexo-generator-sitemap --save
            - npm run clean
            - npm run generate
            - npm run gulp
            - apt-get update && apt-get install -y python python-pip python-dev
            - python --version
            - pip --version
            - pip install awscli --upgrade
            - aws --version
            - aws s3 sync public s3://our-site.com --delete
            - aws configure set preview.cloudfront true
            - aws cloudfront create-invalidation --distribution-id OURKEY --paths OURLISTOFPATHS

The npm scripts are:

"scripts": {
    "clean": "hexo clean",
    "generate": "hexo generate",
    "gulp": "gulp"
  }

Our gulpfile.js looks like:
```
const gulp = require('gulp');
const cleancss = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const imagemin = require('gulp-imagemin');

// Minifiy CSS
gulp.task('minify-css', () =>
gulp.src('./public/*/.css')
.pipe(cleancss())
.pipe(gulp.dest('./public'))
);

// Minifiy HTML
gulp.task('minify-html', () =>
gulp.src('./public/*/.html')
.pipe(htmlmin({
removeComments: true,
collapseWhitespace: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
);

// Minify JS
gulp.task('minify-js', () =>
gulp.src('./public/*/.js')
.pipe(uglify())
.pipe(gulp.dest('./public'))
);

// Compress Images
gulp.task('compress-images', () =>
gulp.src('./public/images/*/')
.pipe(imagemin())
.pipe(gulp.dest('./public/images'))
);

// Execute gulp commands
gulp.task('default', [
'minify-html','minify-css','minify-js', 'compress-images'
]);
```

Hope this helps.

[stale[bot]]

This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs. Thank you for your contributions.