Hexo Are you tired of using blogger, WordPress or paying for web hosting? Perhaps you should consider using static generators such as Hexo to build your website. It is easy to set up, and you can host it for free on Github pages, Firebase, Netlify, Gitlab and so on.

Here is a step by step on how to install Hexo.

Install Hexo

  1. Download Node.js and Git and install them on your computer.
  2. Type CMD on the search to find Command Prompt and launch the Command Prompt.
  3. Run $ npm install -g hexo-cli and click enter to execute.
  4. Run the following commands on your Command Prompt.
1
2
3
$ hexo init <folder name>
$ cd <folder name>
$ npm install

You will see the following folders

1
2
3
4
5
6
7
8
9
├── Node_modules
├── scaffolds
├── source
| ├── _drafts
| └── _posts
├── themes
| └── Landscape (default theme)
├── config.yml
├── package.json

  1. Modify your site settings in _config.yml .
  2. Run $ hexo generate to generate your site files.
  3. Run $ hexo server to see the live website locally at http://localhost:4000/.
  4. Read hexo documentation to learn more about how to use Hexo.

Install Hexo theme

There are many beautiful themes you can get from Hexo themes. If you are looking for premium hexo themes, visit my store.

  1. Download Hexo theme. For example, you are purchasing Hexo Personal, you will find the file name Hexo Personal
  2. Extract the files and place it inside the themes.
  3. Edit your _config.yml files and change the theme field to personal.

For example from

1
theme: landscape

to

1
theme: personal
  1. Edit settings in _config.yml.
  2. Edit the site by going to theme —-> personal. Edit the menu navbar, footer, and etc, in the layout inside the theme.
  3. Deploy the site on Github.

Host your Hexo website on Netlify

  1. Create a new Github or Bitbucket repository.
  2. Clone it on your computer.
  3. Copy your Hexo files and paste it on the clone folder.
  4. Commit and sync (GitHub or Bitbucket).
  5. Got to Netlify.com to sign up. You can sign up using your GitHub or Bitbucket account.
  6. Click on New site from Git. You have the option to choose which Git provider to your site’s source code will be hosted. The options are GitHub, GitLab and Bitbucket.
  7. Choose the repository that you want to deploy.
  8. Ready to deploy
    Branch to deploy: master
    Basic build settings:
    Build command hexo generate
    Publish directory /public
  9. Deploy the site.
  10. Assign a custom domain for your site. Go to domain settings and change the domain.
  11. Or go to Domain management and use Netlify DNS
  12. Enable the SSL/TLS certificate and force TLS to direct all traffic to HTTPS.

Use Prose.io to edit and publish your post.

You can sign in to Prose.io with your Github account to create, edit, and delete files, and save it directly to GitHub.

  1. Visit the website prose.io and authorise on GitHub.
  2. To edit or create a post, go to sourcefolder, then _posts and click on NEW FILE.
  3. The new post that you have created will be automatically published by Netlify if you are using Netlify to deploy your site.

Note:
Don’t forget to git pull everytime you work on your site locally. Git pull will bring a local branch up-to-date with its remote version of your Github repository.

Resouces to read

  1. Adding an existing project to GitHub using the command line.
  2. Basic writing and formatting syntax.
  3. Learn more about markdown.

Tags: