website building

How to use Github and Hexo to build your free website

luojiyi

This blog article can be seen the copy from Zhihu, the motivation for writing the article is to record my learning experience.

---

Steps to build your personal website

Environment config

• Own or Sign up a Github account, then create a new respository named github_name.github.io
• Download & Install NodeJS and Git
• Establish a remote link with github using SSH KEY

---

Hexo config

• Create a new folder to manage your blog article, e.g.: blog

• Open Git Bash here, input command:

  npm install hexo-cli -g
  

  Then continue to input:

  hexo init blog
  

  Note that the blog is the name of your blog floder before.

  cd blog
  npm install
  

  Test your website: hexo s, congratulate that you have seen your website in local.

---

web config

• set your website URL: modify the file _config.yml in blog folder.

  substitute the initial with your github URL: https://github_name.github.io/,

  substitute deploy part with

  deploy:
    type: git
    repo: https://github.com/github_name/github_name.github.io.git
    branch: master
  

  Before deploying your web, sth also need to be done:

  npm install hexo-deployer-git --save
  hexo clean
  hexo g -d            //generate static file & deploy to web
  

  Try to input github_name.github,io/ in your browser, congratulation to you！

upload your article

    hexo n "article_title"

then a markdown file named article_title.md can be seen in source/_posts folder.

---

web theme

• This blog theme is supported by Prontera. To change the default theme, you should download a new theme and save it in themes folder. Then modify the file _config.yml to make it work.

• Based on origin Prontera, slight modification has been done to change the web layout.

• I’m a drop in the ocean, I expect to learn how to design a web start from scratch oneday.
  

• Insert pics in markdown

  Run the command: npm install https://github.com/CodeFalling/hexo-asset-image --save, which can generate a folder with the same name of the article you create next time automatically. So you can use (folder_name/pic_name) to insert local pics in markdown.