How to build your own blog in three sentences

This article is only used to record learning and share my own practice

Foreword: want to get a blog website, can associate to must not have a server? No databases? Can’t register a domain name? That’s fine. If you don’t have any, you can still build a blog. Here’s how to use GitHub to create your own blog.

Installation environment

Node

Download: nodejs.org/zh-cn/downl… Stable versions can be installed. After the installation is complete, ensure that the environment variables are configured so that the NPM command can be used properly

Hexo

Hexo is a blogging framework, and Hexo also provides a command line tool for quickly creating projects, pages, compiling, and deploying Hexo blogs, so we need to install the Command line tool for Hexo first.

Install command NPM install -g hexo-cli

After the installation is complete, you can enter hexo -v to check whether the version number exists to ensure that environment variables are configured properly and the hexo command can be used normally

Create a project

We use Hexo’s command line to create a project. First, create a new folder, change it to the name you want (English only recommended), open the command line and type the following command:

Hexo init {name} //name is your project nameCopy the code

When you see the terminal output that is done, you will see the Hexo initialization files, including themes, Scaffolds, source, and so on, regardless of what they do, let’s take a step forward and see what has changed

Enter the newly generated folder, then call Hexo generate command, compile Hexo to generate HTML code, runhexo generateAfter the command is executed, you can see that the output contains js, CSS, font, etc., and find that they are all in the project root directory under the public folder
We run the blog locally using the Server commands provided by Hexohexo serverThe command line output is as follows

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
Copy the code

Click on the local 4000 port to view the blog site, as shown below:

At this point, the static blog shelf has been built

Start the deployment

Next we’ll put the blog shelf on GitHub Pages to see if it works, and then we can style the blog

GitHub: {username}.github. IO: {username}.github

Once completed, open the _config.yml file in the root directory of the project file, locate the Deployment location, paste in the location of the new Repository, and specify the branch as the master branch.

# Deployment## Docs: https://hexo.io/docs/deployment.html
deploy:  
    type: git  
    repo: {git repo ssh address}  
    branch: master
Copy the code

After the change you need to install an additional git-supporting deployment plug-in called hexo-deployer-git to deploy it to GitHub. NPM install hexo-deployer-git –save Once installed, we can continue our deployment

The deployment command again uses our hexo command output

hexo deploy
Copy the code

If SSH is not configured on GitHub, you will be allowed to enter it. If SSH is not configured on GitHub, you will be allowed to upload it successfully. You can click on the tutorial successfully and see what GitHub uploaded

Hexo supports changing the site name, description, etc. Modify the _config.yml file under the root directory and find the Site area. In this area, you can configure the Site title, subtitle and other contents, keywords and other contents.

# Site title: 'A white wall is painting' Description: 'Mainly programmed in JavaScript, TypeScript, vue3.x' keywords: 'JavaScript,TypeScript, vue3. X, Es series, Css series' Author: White wall Language: zh-cn timezone: 'Copy the code

Three sentences command down, so complete the configuration of the basic information of the site, after completion you can see some basic information is modified, the page effect is as follows:

Replace the topic

There are many topics on making can pull down use changes, the current application in Hexo most basic is the theme of the Next theme, it supports plug-ins and function is extremely rich, the configuration of the subject, our blog can support more extensions, such as reading progress bar, space layout, images, lazy loading in both English and Chinese, and so on. The GitHub address for the theme is: github.com/theme-next/… Clone the master branch. Go to the root directory of the project, open the terminal, and run the following command

git clone https://github.com/theme-next/hexo-theme-next themes/next
Copy the code

github.com/theme-next/hexo-theme-next themes/next
Copy the code

Once executed, the source code for the Next theme will appear under the Themes/Next folder of the project.

Then we need to change the theme name of the blog, modify the _config.yml file in the root directory of the project, find the theme field, and change it to next

You can see the next theme has been switched successfully. The preview looks like this:

The theme style

Next provides a number of styles. The style is the same, but the overall layout is different. You can change the Scheme field, which is _config.yml in the next file

This is what happens when you refresh the page

Head portrait

An avatar is similar to the site’s avatar, and if set, an additional avatar is displayed next to the site’s author information. The red arrow points to

Place your need pictures themes/next/source/images/avatar. PNG path, then in _config. Yml file change avatar configuration, url position changes to the correct path

There are two other configurations, rounded is the configuration, whether the mouse can rotate when it moves

RSS

RSS feeds are an easy way for sites to share content with other sites (also known as Syndication), known as Really Simple Syndication. It is commonly used for news and other sequential websites. To enable RSS feeds, you need to install a plug-in called hexo-Generator-Feed. Once installed, the site automatically generates RSS feeds. Install the command NPM install hexo-generator-feed –save. No further configuration is required after the installation and the RSS feed file will be automatically generated every time the build site is compiled

The code block

The codeblock block of the _config.yml file can be modified as follows

The Settings are as follows:

Read the schedule

Reading_process, reading progress. You may have noticed that some sites have a thin bar at the top of the page that represents page loading and page reading progress. Change _config.yml to look like this:

The Settings are as follows:

bookmarks

Bookmark, a bookmark, can quickly help us navigate to the last page based on our reading history, and you can turn it on and off as you like

github_banner

On some tech blogs, you may have noticed that there is a GitHub icon in the upper right corner of the page. Clicking on the icon takes you to the source page. You can set Permalink as your GitHub link

comments

Because Hexo’s blog is static and does not have access to a database, its comments feature is not self-integrated, but can be integrated with third-party services. The Next theme provides integration of various comment plugins, There are changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte these. Here we use gitalk. It uses the GitHub Issue as a comment, and the style is quite good. First, you need to register an OAuth Application on GitHub. The link is github.com/settings/ap… Client ID, Client Secret.

You first need to configure the use of gitalk in the comments section of the _config.yml file

# Multiple Comment System Support
comments:  
    # Available values: tabs | buttons  
    style: tabs  
    # Choose a comment system to be displayed by default.  
    # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte  
    active: gitalk
Copy the code

Then go to the Gitalk configuration and add its various configurations:

# Gitalk # For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk gitalk: enable: true github_id: white-wall repo: white-wall.github.io # Repository name to store issues client_id: {your client id} # GitHub Application Client ID client_secret: {your client secret} # GitHub Application Client Secret admin_user: white-wall # GitHub repo owner and collaborators, only these guys can initialize gitHub issues distraction_free_mode: true # Facebook-like distraction free mode # Gitalk's display language depends on user's browser or system environment #  If you want everyone visiting your site to see a uniform language, you can set a force language value # Available values: en | es-ES | fr | ru | zh-CN | zh-TW language: zh-CNCopy the code

This is what happens when you add the above configuration and refresh

Load without refresh

You may have heard of Ajax, not pJAX, this technology is actually the use of Ajax technology to achieve local page refresh, can achieve URL replacement, and can do no refresh loading.

To enable this function, you need to enable the pJAX function first, then install the corresponding pJAX dependency library, first modify _config.yml to change the pJAX: true

Switch to the next theme file and install the dependency libraries:

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
Copy the code

More theme modifications and other configurations can be found at hexo. IO /docs/

The article

The careful Hexo has already given this command after the initial generation

hexo new hello-hexoRunning this command will appear in thesource/_postsUnder the folder, it’s MarkDown format. Add the necessary information at the beginning of the article in the following format:

-- Title: automatic creation of hello- worldDate: date # automatic creation of hello- worldDate: date # automatic creation of hello- worldDate: date # automatic creation of hello- worldDate: date # automatic creation of hello- WorldDate: date # automatic creation of hello - Classification 1 - Classification 2 --Copy the code

Write the body below the beginning in MarkDown format.

IO /zh-cn/docs/ hexo. IO /zh-cn/docs/…

TAB

As with new articles, typing hexo new Page tags in the directory will automatically generate a source/tags/index.md file, also in MarkDown format. We can add a type field to the tags file to specify the type of the page, as shown in the figure below:

Set it in the newly created article file, as shown:

After setting the _config.yml file of the theme, add the link of this page to the main menu. Modify the menu to remove tags# to achieve the effect of opening the TAB page, and then you can go to the page to view the effect

Search page

To add the search function, you need to install a plug-in called hexo-generator-searchdb as follows:

npm install hexo-generator-searchdb --save
Copy the code

Then add the following search Settings to the project’s _config.yml:

search:  
    path: search.xml  
    field: post  
    format: html  
    limit: 10000
Copy the code

Then modify _config.yml in the theme as follows:

# Local search
# Dependencies: https://github.com/wzpan/hexo-generator-search
local_search:  
    enable: true 
    # If auto, trigger search by changing input. 
    # If manual, trigger search by pressing enter key or search button.  
    trigger: auto 
    # Show top n results per article, show all results by setting to -1  top_n_per_article: 5 
    # Unescape html strings to the readable one.  
    unescape: false 
    # Preload the search data when the page loads.  
    preload: false
Copy the code

404 pages

Create a 404. Md file in the source folder of the root directory. The contents can be as follows:

-- Title: 404 Not Found Date: 2021-09-20 10:41:27 -- <center> Sorry, the page you visited did Not exist or has been deleted. You can <a href="https://blog.white-wall.cn>"> click here </a> to return to the home page. </center> <blockquote class="blockquote-center"> whiteWall </blockquote>Copy the code

After creating it, also open the # of 404 in the _config.yml theme

The deployment scripts

Create a new deploy.sh script file in the root directory as follows:

So when we deploy the release we just need to execute:

sh deploy.sh
Copy the code

Custom domain name

GitHub also supports custom domain name Settings. Click GitHub Setting to see page, and you will be prompted to do so

It is worth noting that if a custom domain name is configured, the custom domain name Settings will be automatically cleared each time a deployment is made in the current case. To avoid this, we need to create a new CNAME file under the project directory, source/CNAME, and the content is the custom domain name.

For example, I created a new CNAME file in the source directory with the contents of

blog.white-wall.cn
Copy the code