Click the blue text above to follow us
Reminder: This article is about 7,500 words, and it takes 7 minutes to read.
Preface
If you are a person who loves sharing (zhuang) and sharing (bi), if you are an unwilling programmer (yuan), and you want to build a personal website of your own, then please follow this article to operate it again, almost free You quickly own your own blog site, write articles to record your life, and enjoy this process from 0 to 1.
Hexo is a static blog framework based on Node.js. It has less dependency and is easy to install and use. It can easily generate static web pages and host it on GayHub. It is the preferred framework for building blogs, and there is a personal blog on Github that will come up immediately. !
To learn more about Hexo, you can visit the official website https://hexo.io/zh-cn/docs/
hexo installation configuration
Basic components
Installing Hexo is quite simple, just install the following applications first:
git
node.js (Node.js version needs to be at least 8.10, it is recommended to use Node.js 10.0 and above)
The installation of these two components is very simple, and as a qualified program ape/yuan should have been in touch, we directly skip the installation steps. You can use after the installation is complete git --version, and node -vtwo instructions to verify the installation.
Install hexo
After all the necessary applications are installed, you can install Hexo using npm. After installation shell command can verify the installation, as follows:npm install -g hexo-clihexo -v
Create a blog
Create a folder, then execute the hexo -initshell command after entering the folder to initialize the blog, the specific operations are as follows:
mkdir /blog
cd blog
hexo -init
After initialization, the following directory files will be generated in the current directory
node_modules : dependent package public : store the generated page scaffolds : template folder. When creating a new article, Hexo will create a file based on the scaffold. source : The resource folder is a place to store user resources. Except for the _posts folder, files/folders named with _ (underscore) at the beginning and hidden files will be ignored. Markdown and HTML files will be parsed and placed in the public folder, while other files will be copied. themes : theme folder _config.yml : blog configuration file, most of the configuration is based on this file.
After initialization, we can publish the blog, and now experience the effect locally:
hexo g
hexo server
In this way the browser access http://localhost:4000can view the effect of the blog!
github configuration
Build warehouse
Create a warehouse on github with the same username as yours, and add it later .github.io. Only in this way, it will be recognized when you deploy to the GitHub page in the future, that is, http://yourname.github.io, where yourname is your registration GitHub username.
For example, the username of the blogger is jianzh5, then the warehouse I built is jianzh5.github.io
Generate ssh
Use the following command to configure your git information
git config --global user.name "yourname"
git config --global user.email "youremail"
Here yourname enter your GitHub username, youremail enter your GitHub mailbox. This way GitHub can know if you correspond to its account.
You can check and confirm your configuration with the command
git config user.name
git config user.email
Generate ssh ssh --keygen -t rsa -C "youremail" Keep pressing Enter to generate ssh, as shown below, the figure shows the location where you generated ssh.
ssh is a set of secret keys. Among them, id_rsa is the private key of your own computer, and id_rsa.pub is the public key. We put the public key on GitHub, so that when you link to GitHub’s own account, it will match your private key based on the public key. Only when they match each other can you successfully upload your files to GitHub via git .
Configure ssh In the GitHub setting, find the SSH keys setting option, click New SSH key to copy the content information in your id_rsa.pub.
Verify whether ssh is successfully configured ssh -T [email protected]
Related
After setting up the Hexo blog and creating the Github warehouse, the next step is to associate the two and deploy the articles generated by hexo to Github.
Modify the hexo configuration file,
open the site configuration file with the github repository_config.yml, pull to the final deploy configuration item, and add the git configuration. You can directly replace YourgithubName with your github account!
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
Install
hexo-deployer-git, so you can deploy to Githubnpm install hexo-deployer-git --savePublish articles and deploy Execute the following three commands for article publishing and deployment
hexo clean
hexo generate
hexo deploy
hexo cleanIf you have cleared the things you generated before, you don’t need to add them. hexo generate Generate static articles, you can also use abbreviations to deploy articles, or you can use abbreviationshexo ghexo deployhexo d
Note that you may be required to enter username and password when deploying, just enter them directly.
If the effect shown in the above figure appears, the deployment is successful. At this time, you can visit and view the effect of your blog through the browser.https://jianzh5.github.io
Blog configuration
Most of the configurations in hexo are configured in specific topics, only some basic configurations need to be configured in the main configuration file (_config.yml), such as blog name, author, time zone, etc., you can configure yourself according to the situation, the following is the blogger Configuration
post article
hexo publish articles is very simple, only need to perform in your home directory hexo n "文章标题" command execution is completed will /blog/source/_postsgenerate the corresponding md file folder, just use the article you want to edit the file to use the editing tools to edit the generated md.
When writing an article, you can use tags and categories to label and classify the article to facilitate later retrieval. Examples are as follows:
Theme configuration
If you don't like the default theme of nexo, you can change a theme. Here we choose Next as our blog theme, the official address is:https://github.com/theme-next/hexo-theme-next
Download the next theme and execute the git command in the blog directory address to download the theme
cd /Users/zhangjian/blog
git clone https://github.com/theme-next/hexo-theme-next themes/next
After the download is complete, we can see the next theme folder under themes theme folder
Modify the theme configuration Open _config.yml, modify the theme attribute configuration, set the value to next
Recompile and deploy
hexo g
hexo d
In this way, your blog theme is changed to next, you can visit my blog to check the effect:https://jianzh5.github.io/
Configure search function
General blogs will integrate search and search functions, and NexT themes support the integration of multiple searches: Local Search, Algolia, micro search, etc. I use Local Search, you can choose by yourself.
The configuration steps for Local Search are as follows:
Install the plugin hexo-generator-searchdb
$ npm install hexo-generator-searchdbModify site configuration file
search:
path: search.xml
field: post
format: html
limit: 1000
path: The path of the index file, relative to the site root directory field: the search scope, the default is post, you can also choose page, all, all means to search all pages limit: limit the number of entries searched
Modify the theme configuration file
# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
enable: true
Effect preview
Comment configuration
A blog without comments has no soul. The NexT theme supports a variety of comment plugins. Here we choose valine as the comment system. You can go to the official website for details. https://leancloud.cn
Registration good application to modify the configuration file into the directory where the theme of the blog /next/_config.yml, open valine and modify your registration appidand appkey, after the configuration is complete use hexo gand hexo dcompile publish to see results.
Copyright statement
There is a copyright statement and a link to the original text at the end of the article on the mainstream website. The following effect is the copyright statement of a blogger's blog on CSDN:
To configure the copyright statement in the next is very simple, only need to modify the theme configuration file _config.ymlin the creative_commonstag configuration:
creative_commons:
license: by-sa
sidebar: true
post: true
language: deed.zh
We can all protocols in the site https://creativecommons.org/licensesunderstand, you can replace the agreement in accordance with demand.
After the configuration is complete, redeploy hexo, the effect is as follows:
Reward function
Many blog platforms now integrate rewarding functions. If you want to implement this function, you can follow the steps below.
Prepare WeChat and Alipay payment QR codes and upload the two payment QR code images to source/images under the next theme folder, namely
/blog/themes/next/source/imagesModify the theme configuration file and turn on appreciation
Recompile and deploy
hexo g
hexo d
View the effect on the article detail page
Social function
I hope to add my own link on other platforms to my personal blog, and you can directly modify the theme's configuration file. For example, the blogger adds the blogger's CSDN and Zhihu links to the blog. It's very simple. Just configure a link and icon. You can find the corresponding icon on this website:,
https://www.thinkcmf.com/font/font_awesome/icons.htmlif you don't use the icon, don't forget to follow it ||, otherwise the compilation will not succeed!
Configure tab page
Create a tab
on the main blog directory executehexo new page tagscreate tags page, the page is located/blog/source/tags/index.mdEdit tab, set page type
title: 标签
date: 2020-06-14 20:57:56
type: "tags"
comments: false
Since we opened the comments before, all the pages are turned on by default comment function, and tabs do not need to comment, we need to add comments: falseComments Off.
Modify the menu configuration and add the label page to the menu
menu:
home: / || fa fa-home
tag: /tags/ || fa fa-tags
archives: /archives/ || fa fa-archive
Configure category page
Create a category page
hexo new page categories, the page is located/blog/source/categories/index.mdEdit category page, set page type
title: 分类
date: 2020-06-14 20:57:56
type: "categories"
comments: false
The category page also needs to close comments.
Modify the menu configuration and add the category page to the menu
menu:
home: / || fa fa-home
tag: /tags/ || fa fa-tags
catagories: /catagories || fa fa-th
archives: /archives/ || fa fa-archive
summary
This article takes you to use Hexo and Github to build your own personal blog. All the basic functions of the blog should be configured, and the rest of the personalized configuration is waiting for everyone to dig slowly.
As a programmer (yuan), it is very good to insist on writing a technical blog, which can greatly expand your technical system, and "outputting input" is a good learning method in itself. If you have the idea of building a blog, you must stick to it. Don't go fishing for three days or surf the Internet. Everyone encourages!
If this article is helpful to you,
Don’t forget Sanlian,
Like, forward, comment
。
See you next time!
End
Dry goods sharing
Here is a small gift for everyone, follow the official account, enter the following code, you can get the Baidu network disk address, no routines!
001: "A must-read book for programmers"
002: "Building back-end service architecture and operation and maintenance architecture for small and medium-sized Internet companies from scratch"
003: "High Concurrency Solutions for Internet Enterprises"
004: "Internet Architecture Teaching Video"
006: " SpringBoot Realization of
Ordering System" 007: "SpringSecurity actual combat video"
008: "Hadoop actual combat teaching video"
009: "Tencent 2019 Techo Developer Conference PPT"
010: WeChat exchange group
Recent hot articles top
01 Architect's Road-Virtualization Technology and Container Docker
I knew you were "watching"