1. Preface
1.1. What you want to say
When I was learning markdown grammar recently, I thought why not build a personal blog site to share my learning experience and experience, so I started working immediately, and soon, a simple blog site was born, here comes Share with you the use of hexo + GitHub to build a personal blog from 0 to 1.
1.2. Preparations
Before starting a blog, you need to:
- Have a GitHub account, if not, sign up for one
- Installed node.js, npm, and understand the relevant knowledge
- installed git
The environment I use:
2. Build a GitHub blog
2.1. Create warehouse
Create a new repository named your github username.github.io
, for example, if your github username is zengjiahao1222, then you can create a new repository zengjiahao1222.github.io
warehouse (must be your user name, other names are invalid), your website access address will be http://zengjiahao1222.github.io](http://test.github.io/) in the future!
Precautions:
- The registered email must be verified, otherwise it will not succeed
- The warehouse name must be
username.github.io
, where username is your GitHub username- The successful creation of the warehouse will not take effect immediately, it will take a while, about 10-30 minutes. I’m stuck with this one! ! !
2.2. Bind domain name
This is also possible without binding, and you can also access it with the default xxx.github.io
, but if you want to be more personalized and want to have your own domain name, then buy it A domain name.
Here it is recommended to go to Alibaba Cloud to register domain names, big companies, guaranteed! ! !
3. Configure SSH key
3.1. Github configuration SSH Key
Why configure this? Because you must have your github permission to submit the code, but it is too insecure to directly use the user name and password, so we use ssh key to solve the connection problem between the local and the server.
$ cd ~/.ssh #Check the existing ssh key on this machine
If prompted: No such file or directory, it means you are using git for the first time.
$ ssh-keygen -t rsa -C "mail address"
Then press Enter 3 times in a row, and finally a file will be generated in the user directory, open the user directory, find the .ssh\id_rsa.pub
file, open Notepad and copy the contents, and open your github On the home page, go to Personal Settings -> SSH and GPG keys -> New SSH key -> Paste the copied content to the key, fill in the title and save:
3.2. Test whether the configuration is successful
$ ssh -T [email protected] # Note that the email address does not need to be changed
If it prompts Hi zengjiahao1222! You've successfully authenticated, but GitHub does not provide shell access.
, congratulations, you have successfully configured SSH
At this point you also need to configure:
$ git config --global user.name "liuxianan"// Your github username, not a nickname $ git config --global user.email "[email protected]"// fill in your github registration email
4. Use the hexo framework to write a blog
4.1.hexo Introduction
Hexo is a simple, fast, and powerful Github Pages-based blog publishing tool that supports Markdown format and has many excellent plugins and themes.
Official website: http://hexo.io
github: https://github.com/hexojs/hexo
4.2. Principle
Since github pages store static files, blogs store not only article content, but also dynamic content such as article lists, categories, tags, and page flips. If you have to manually update the blog post directory and related links every time you write an article Information, I believe everyone will go crazy, so what hexo does is to put these md files locally, call the written command every time after writing an article to complete the generation of related pages in batches, and then submit the changed pages to github.
4.3. Installation
It is recommended to use git bash to execute the command
$ npm install -g hexo
Hexo has two _config.yml
files, one is the global _config.yml
in the root directory, and the other is under each theme
;
4.4. Initialization
Create a new folder named hexo somewhere in the computer (the name can be chosen at will), for example, mine is D:\hexo
$ cd /d/hexo/ $ hexo init
hexo will automatically download some files to this directory, including node_modules
$ hexo g # generate $ hexo s # start the service
After executing the above command, hexo will generate relevant html files in the public folder, and these files will be submitted to github in the future:
hexo s
is to open the local preview service, open the browser and visit http://localhost:4000 to see the content
When initializing for the first time, hexo has already helped us write an article called Hello World. The default theme is ugly, and it looks like this when it is opened:
4.5. Modify the theme
Personally, I think the official theme is a bit ugly, so I continued to change the theme. After a round of theme comparison, I personally like hexo-theme-butterfly
First let’s download the theme
$ cd /d/hexo/ $ npm install hexo-theme-butterfly
Notice:
- You can also use
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
instead, but I use this in the subsequent process of modifying the theme style It often happens that the style does not take effect in . After replacing it with thisnpm install hexo-theme-butterfly
installation method, this problem is basically solved.- It is worth mentioning that installation via npm does not generate theme folders in themes, but in node_modules
- butterfly theme beautification tutorial butterfly
Modify theme: landscape
in _config.yml
to theme: yilia
, and then re-execute hexo g
to restart generate. Every time you modify the configuration file, remember to perform hexo clean
first to clean up the content of public
, and then hexo g
4.5. Upload to Github
Let’s install a plugin first, otherwise the subsequent hexo d
operation will report an error
npm install hexo-deployer-git --save
If you have configured everything, it is easy to publish and upload, just a sentence of hexo d
. Of course, the key is that you have to configure everything.
First of all, ssh key
must be configured.
Second, configure the deploy-related part of _config.yml
deploy: type: git repository: [email protected]:zengjiahao1222/zengjiahao1222.github.io.git branch: main
Here, branch should write main, because GitHub officially changed the default branch master to main on October 1, 2020
4.6. Commonly used hexo commands
common commands
hexo new "postName" #New article hexo new page "pageName" #New page hexo generate #Generate static pages to public directory hexo server #Open preview access port (default port 4000, 'ctrl + c'close server) hexo deploy #Deploy to GitHub hexo help # View help hexo version #View the version of Hexo
abbreviation:
hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy
Combined commands:
hexo s -g #Generate and preview locally hexo d -g #generate and upload
4.7. Blogging
Navigate to our hexo root directory and execute the command:
hexo new 'my-first-blog'
hexo will help us generate relevant md files under _posts
, we only need to open this file to start blogging. Of course, you can also directly create a new md file yourself. The advantage of using this command is that it automatically generates the time for us.
The general full format is as follows:
--- title: postName #The display name on the article page, usually in Chinese date: 2013-12-02 15:30:16 #Article generation time, generally not changed, of course, can be modified arbitrarily categories: default categories #categories tags: [tag1, tag2, tag3] #Article tags, can be empty, please use the format for multiple tags, note: there is a space behind description: Attach an abstract of the article, preferably within 140 words, which will appear in the meta description --- The following is the text
4.7.1. Tools for blogging
Typora is recommended here
5. Conclusion
This is the end of this tutorial on building a personal blog website with hexo + github. I don’t know if you have completed it. If there are any mistakes in the knowledge points and content, please contact me in time to correct it
Part of the content is reprinted from the blog garden of classmate Xiaoming. If there is any infringement, please contact me immediately for modification.