Github x Hexo

Setup a website through github x Hexo

Introduction

Hello everyone, I am a data scientist that enthusatic on software development. The motivation of setting up my website is that I want to share my experiences and make my profolio more representative.

Here I use Github and Hexo to setup the website. The advantages of them are:

  • The domain is free and the websites are deployed on cloud, so we don’t need to buy any hardware (e.g. NAS, router, PC, server) that can’t shutdown.
  • It supports Markdown, easy to learn and commonly used language. See more at Learning Markdown in 10 minutes

On the other hand, there are some limits, such as:

  • The website is static. It doesn’t support animations such as javascript.
  • There is no backend so that one cannot upload or download data.
  • The size of website are limited less than 1 GB
  • The bandwidth cannot exceed 100GB per month
  • The submit times have a soft limit of 10 per hour

However, it’s very enough for most of the user for sharing their techniques or displaying their works. Now, we move to the tutorial for creating your first website. (This article is for the Windows10 user only). This tutorial is referenced by [教學] 使用 GitHub Pages + Hexo 來架設個人部落格

Setup

  1. Sign in or Sign up your github account at Github.
  2. Create a new repository with the name your_account_name.github.io
  3. Visit the repository and click “setting”, then click “Choose a theme”. No matter what theme is chosen, it will be replaced by hexo themes later.
  4. Install the software, including:
    1. Node.js (14.15.4 is feasible)
    2. Git (2.30.0 is feasible)
    3. Notepad++ (7.8.x is feasible)
  5. Open the CMD and type the following commands. Note that your_installation_path and the your_blog_name can be set as you want.
1
2
3
4
5
6
7
npm install -g hexo-cli
cd your_installation_path
hexo init your_blog_name
cd your_blog_name
npm install
npm install hexo-deployer-git --save
npm install hexo-admin --save

Further explanation:

  • “npm” is a package manager for node.js that widely used in web development under .NET framework
  • “cd” stands for change directory, the most important and frequently used command in both windows and linux.
  • These command is to install the tools that available for us to clean the cache, deploy new website and manage the web in just one line command. The other thing is to initialize our blog with your_blog_name. You can see a directory with many files in your_installation_path.
    123
  1. Edit the text file _config.yml in your_installation_path.
    • You can set the title, subtitle, author at this file
    • Then set the url as https://your_github_account.github.io/
    • Finally, go to the bottom part of the file, and set the repo as https://github.com/your_github_account/your_github_account.github.io.git
  2. Now, we can deploy our website. There will be a example article as the first deployment. The following commands are both suitable for first deployment and all the deployment later.
1
2
3
hexo cl
hexo g
hexo d

The three steps stands for clean, generate and deploy. You can also type the full name instead of the abbreviation. Finally, we can vist our website https://your_github_account.github.io .

Create your first post

Now, let’s start to post our first article and deploy it.

  1. Stay at the same directory, or cd your_installation_path if needed, and launch the server
    1
    hexo s
  2. Visit your website as adminstrator. http://localhost:4000/admin
  3. Add a new article with certain title. Type something like Hello world and press the Publish botton. You can keep refresh the website http://localhost:4000/ to preview your website.
    123
  4. Press Ctrl+C in CMD to stop the server. Then deploy it by the three commands hexo cl, hexo g, and hexo d.

Supplements

File system

The folder where you setup the website is important because once you miss the folder, it can not be reversed. So it’s necessary to backup the entire folder in the clond or other storage device. Further, you can deploy your pages from other computer as long as you keep the folder. Now, let’s see the files in the folder.

  • source: Saves all the Markdown articles. There are three states of the articles
    • _discarded
    • _drafts
    • _posts
  • themes: You can reference the themes of Hexo. However, it’s troublesome to apply because the installation varies from themes to themes.
  • _config.yml: The setting of the blog

Rebuild website from the folder

You can rename or move the folder to other place even in different machines, then keep using the four commands hexo s, hexo cl, hexo g and hexo d as long as the computuer has setup the environment.

Add tag or category

Go to the source/ and find your article. Edit it through text editor and Add the category.