How I Deployed this Website

With hexo, nginx and git

github+hexo+nginx = your blog!

This website is deployed with nginx server, hexo and github.

In this post, I will explain in detail how I deployed this website. To proceed, you have to have basic knowledge of Linux and git.

Preliminary Installation

First, follow this guide to install the LEMP package on your server. After Nginx is installed correctly, we can follw this guide to install hexo.

Further Configuration of Hexo

We can choose a theme for our future site. The theme for this site, for example, is hueman. We can simply use git clone git@github.com:ppoffice/hexo-theme-hueman.git to download the github repo in /themes directory in our hexo folder. Make sure to delete the .github, .gitignore files/directories before proceeding. The reason for this will be given later on.

Now that hexo is ready, we need yet another step: to make this website portable. That is, to make it safer,and make it easier to implant if we want to change to a new server. This can be achieved by making use of github. Basically we can host all our files on github so they never get lost, and we will be able to do the most operations locally, without having to log into our remote server (our virtual private server, aka VPS).

Host it on GitHub

A detailed tutorial can be found here. However, to make things easier, I did not follow every step of the tutorial. You can make your own choice. Above is an important reference though, refer to it if you come across any problems.

We start by initialize a git repo in our hexo root.

git init

Then we create a repo on github and upload this whole folder to that repo. Link the remote repo to our local repo, namely, the hexo folder.

git remote add origin git@github.com:Your_Repo.git

Previously, we deleted the git info of our theme cloned from github, because we don’t want to bother with the issue of sub-repositories in git. If we have a git repo inside a git repo, this will cause some problems with normal git commands, unless we configure the sub-repo correctly. However, this is not easy so I chose to avoid it.

Next, we follow Step 5 and Step 6 in the tutorial, which will help us create yet another repo on github, storing the static files of our website, which will then be displayed by our remote nginx server. Here the difference is, I am carrying out Step 5 on my local computer, while Step 6 on my VPS.

Suppose the static repo we created on github is named hexo_static, which was the one to be displayed by nginx on our VPS (caution: the tutorial used hexo instead). Log into our VPS and git clone the static folder to /var/www (actually it can be any desired location, just remember to change the default configuration file in nginx).

Start Writing Our Blog!

After all these done, we can start blogging!
Every time we create a new post, follow this routine:

  • hexo new your_post on our local computer
  • edit our local post
  • run hexo server to check on our local computer whether everything is as-expected
  • hexo g -d to generate our static website files
  • git add . and git commit -m "some message" to update git
  • git push to update our remote repo on github
  • log into our VPS, go to where static files are stored, run git pull to update it
  • enjoy your updated website!

Also, use git status to ensure that everything is up-to-date both on our local computer and VPS.

Tip:

If a website is maintained by more than one person, there might be many local computers. To maintain one hexo folder on each computer, just git clone the hexo folder (not the static one!) and run npm install inside the cloned repo. This will help hexo recognize this folder.

Conclusion

That’s how I deployed this website, and also mechinfo.me, the student webpage for THU ME students. Thanks for reading this tutorial. Happy blogging!

Share