How to quickly build a blog

New Project

First, create a new repository on GitHub (Repository), named {username} .github.io, note that this name is rather special, and if necessary github.io ending suffix. To be consistent with the user name, such as ihankleo of GitHub user name is called ihankleo ihankleo.github.io, after the completion of the new follow-up can be operated.

Prior to first configure SSH link, because the blog is deployed will be used later. Here a brief introduction on how to configure SSH, first enter the Settings-SSH and GPC keys-New SSH key, Title here customizable,

Installation Environment

Install Node.js

First installed on their computer Node.js, Download: https://nodejs.org/zh-cn/download/, you can install the Stable version.

After installation, make sure that the environment variable configured, can be used normally npmcommand.

Installation Hexo

Then you need to install Hexo, this is a blog framework, Hexo official also provides a command-line tool, used to quickly create project page, compiling, deploying Hexo blog, so before that we need to install Hexo command line tool.

Command is as follows:

npm install -g hexo-cli

After installation, make sure that the environment variable configured, can be used normally hexocommand.

Initialize the project

Next we use Hexo the command line to create a project, and run it locally, run through the whole look.

First, create a project using the following command:

hexo init {name}

Here's name is the project name, I am here to create ihankleo blog, I'll name the project as ihankleo, and with the pure lowercase ordered as follows:

hexo init ihankleo

This will occur under nightteam Hexo initialization file folders, including themes, scaffolds, source and other folders, the content for the time being not control what is done, let's know what there is, then go step by step and see all happened What a change.

Next we enter the first new generation of file folders inside, then call Hexo the generate command, Hexo compiled HTML code, the command is as follows:

hexo generate

You can see the output of which contains js, css, font, etc., and found that they are in the public file in the folder below the project root.

Then we use the serve command Hexo provided by the blog up and running in the local command is as follows:

hexo server

After running the command output is as follows:

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

So far the local port 4000 can view the blog site

deploy

Next we will look at the initialization of the blog were deployed into the GitHub Pages above to test its usability. After the success we can then follow-up changes, such as changing themes, modify page layout, and so on.

So how to deploy this page to GitHub Pages above it, in fact Hexo has provided us with a command, we can use it one-click deploy directly to the blog, do not need to manually configure servers or other various configurations.

Deployment command as follows:

hexo deploy

Before deployment, we need to know the address of the blog of the deployment, it needs to address corresponds to a Repository of GitHub, and the information we need to configure it.

Open _config.yml file in the root directory, locate the Deployment of this place, to just paste the address of the new Repository over, and then specify the branch to master branch, eventually modified to read as follows:

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

Content specifically modified as follows:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:ihankleo/ihankleo.github.io.git
  branch: master

In addition, we also need to install an additional support for the deployment of plug-in Git, called hexo-deployer-git, with which we can successfully deploy it to GitHub above, if not installed, in the implementation of the deployment command reported the following error:

Deployer not found: git

Well, then let's install this plug-in, under the project directory to perform the installation command as follows:

npm install hexo-deployer-git --save

After a successful installation, perform the deployment command:

hexo deploy

Run results similar to the following:

INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
...
INFO  Deploy done: git

If that is similar to the above occurs, it proves that our blog has been successfully deployed to GitHub Pages above, and this time we visit the following links GitHub Repository of the same name, such as my blog ihankleo the Repository name is taken ihankleo.github.io, that I visit http://ihankleo.github.io, this time we can see the blog content exactly like a local.
In fact all the contents of the folder blog following public folder, Hexo the static page content after compiling uploaded to the master branch above GitHub go.
If you want to put on top of GitHub how to do it? Actually very simple, create a new branch of the other like, for example, I created a new source here on the branch, representatives blog source of meaning.
Adding specific process is very simple, to participate in the following order:

git init
git checkout -b source
git add -A
git commit -m "init blog"
git remote add origin [email protected]:{username}/{username}.github.io.git
git push origin source

After, you can then switch to the default branch on GitHub under, for example, I put the default settings for the branch source, of course, can not change.

Configure Site Information

After completing the above content, in fact we only completed a small step to build a blog, because we are the only initialize the successful deployment of the page, blog which has not yet set any valid information. Let's look at the basic configuration to the blog, another for a nice theme, configure some other content, so that blog truly become our own blog now.

Here I will take my own site ihankleo for example, modify the basic configuration, such as site name, site description, and so on.

_Config.yml modify files in the root directory, locate the Site area, there you can configure site title title, subtitle subtitle and other content, keywords, keywords and other content, for example, I would modify the following:

# Site
title: ihankleo
subtitle: 一个专注技术的组织
description: 涉猎的主要编程语言为 Python,爬虫
author: ihankleo

You also can set about the language, if you want to set as the Chinese, then you can set the field for the language zh-CN, amend as follows:

language: zh-CN

This completes the basic configuration of the site, you can see that after the completion of some basic information on the amendment came

Modify Subject

For now, the entire page style personal feeling is not so good-looking, want to change a style, which involves the configuration topic.

Currently Hexo which is the most widely used basic theme Next theme, the theme of personal feeling or good looking, it supports additional plug-ins and features are also very rich, configure the theme, our blog can support more extensions, such as reading progress bar, English space layout, images lazy load and so on.

Well first of all let us install on GitHub Repository under the theme Next it now Next topic has been updated to version 7.x, we can go directly to the theme Next theme download.

GitHub is the theme of the address: https: //github.com/theme-next/hexo-theme-next, we can directly to the master branch Clone down.

First, enter the command line to the root directory of the project, execute the following command:

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

After performing the complete source code Next topic will appear in the project themes / next folder.

Then we need to change the name of the theme used in the next blog, modify _config.yml file in the project root directory, find theme field, is next to amend, amend as follows:

theme: next

Then back on local services, access to refresh the page, you can see the next topic on the successful handover

Theme configuration

Now that we have successfully switched to the next topic of the above, then we are on the topic in further detail the configuration of it, such as modifying styles, adding support of other features, the following one by one to have been.

Next topic interior also provides a configuration file called the same name _config.yml, but the position is not the same, which in themes / next folder, Next topic which all functions can be controlled by the configuration file, the following said contents are modified themes / next / _config.yml file.

style

Next topic also provides a variety of styles, with black and white style is similar, but not quite the same position the entire layout, by modifying the scheme field to the profile, I chose Pisces style, modify _config.yml (note the themes /next/_config.yml file) as follows:

scheme: Pisces

There are also several options, such as:

# scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

favicon

favicon is a small icon in the tab bar of the site, the default is to use small icons Hexo, if we have a site Logo picture, we can customize your own small icons.

But that does not mean that we need to design their own with their own PS, already have a website directly into the picture icon sites, site links to: https: //realfavicongenerator.net [1], to upload a picture here , you can go directly into a variety of small download icon size and fit different devices.

After the download icon put it in themes / next / source / images directory.

Then find the configuration file which favicon configuration items, some related path configuration can go in, for example:

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/safari-pinned-tab.svg

After configuration is complete refresh the page, the icon label the entire page was updated.

avatar

avatar the avatar on a similar site, if this is set, displays an avatar of additional information next to the site

Placing the themes / next / source / images / avatar.png path, and then configure the avatar editor in theme _config.yml file, change to the correct path.

# Sidebar Avatar
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # If true, the avatar would be rotated with the cursor.
  rotated: true

Here are rounded option whether to display round, rotated with a rotation effect is whether, if we can turn to choose to.

Avatar will be displayed after the configuration is complete.

rss

Blog RSS feeds are generally required if you want to open the RSS feed, here you need to install a plug-in, called hexo-generator-feed, after the installation is complete, the site will automatically generate RSS Feed files, install the command as follows:

npm install hexo-generator-feed --save

Run in the project root directory command, after the installation is complete no other configuration, compiled after each time the site will automatically generate RSS Feed files.

code

As the program ape, display the code block or need very particular about the default block of code I personally do not particularly like, so I changed to the color code of black, button and copy the style changed to Mac-like style, modify _config codeblock block .yml file is as follows:

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night bright
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

top

We browse the Web, if you have read the upper want to quickly return to the site, usually there is a button to assist, where it also supports the configuration, modify back2top field to _config.yml, my settings as follows:

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

enable default is true, which is the default display. sidebar If set to true, the button appears below the sidebar, personally feel that is not very nice, was canceled, scrollpercent display reading is the percentage of individuals feel pretty good, it will be set to true.

reading_process

Some sites uppermost progress bar will appear a thin, on behalf of the page loading progress and reading progress, if you want to set, then you can try, I will open it up, modify _config.yml as follows:

reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#222"
  height: 2px

bookmark

Bookmarks, can read history, open the page the next time to help us quickly locate the last position, you can turn on and off according to the preferences, my configuration is as follows:

bookmark:
  enable: false
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

github_banner

On some technical blog, you may have noticed that there is a GitHub icon in the upper right corner of the page, then click on the page to jump to its source, may drainage as GitHub Repository, if you want to display, then you can choose to open their own, my configuration is as follows :

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/ihankleo/ihankleo.github.io
  title: Hank GitHub

Can be seen in the upper right corner of the page shows the GitHub icon, tap to go to the Repository page.

gitalk

Because Hexo blog is static blog, and there is no database connectivity, so it's not self-review function is integrated, but you can integrate third-party services.

As a programmer, I personally prefer gitalk, it is the use Issue GitHub to comment when, style is also quite good.

First you need to register a OAuth Application on GitHub above, link to: https: //github.com/settings/applications/new, get Client ID After registration is completed, Client Secret on it.

First, you need to configure in the comments area _config.yml files using gitalk:

# 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

Mainly comments.active field select the corresponding name.

Then find gitalk configuration, adding its various configurations:

# Gitalk

# Demo: https://gitalk.github.io

# For more information: https://github.com/gitalk/gitalk

gitalk:

  enable: true

  github_id: NightTeam

  repo: nightteam.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: germey # 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-CN

After configuration is complete gitalk ready to use, click into the article page

GitHub authorization after login you can use, and review the content will automatically appear in Issue inside.

pangu

Personally, I have a compulsive disorder that is intermediate to write Chinese and English when necessary to leave the pitch, a simple and direct way is the middle of a space, but in some cases may not add or habitually forget to add, and this lead to shuffling in English is not so beautiful.

pangu is to solve this problem, we only need to use this option in theme which, when compiled page will automatically add a space between the Chinese and English, looks more beautiful.

Specific modifications are as follows:

pangu: true

math

In some cases we may need to write a formula, such as a demonstration algorithm derivation, MarkDown support formula is displayed, Hexo the Next theme is also supported.

Next topic provides two rendering engines, namely mathjax and katex, the latter with rendering speed is faster and does not require additional support JavaScript, but the latter is not yet supported feature rich as the former, the contrast can be specific see the official document: https: //theme-next.org/docs/third-party-services/math-equations.

So here I chose mathjax, can be enabled by modifying the configuration:

math:

  enable: true
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

pjax

We may have heard of Ajax, heard pjax, in fact, this technology is the use of Ajax technology to achieve a partial page refresh, can be achieved only replace the URL, there can be done without refresh loaded.

To enable this feature requires pjax first turn function, and then install the corresponding pjax dependencies, first modify _config.yml modified as follows:

pjax: true

Then install the dependent libraries, switch to the next topic, and then install the dependent libraries:

$ cd themes/next

$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

Such pjax it opens up, you can achieve without refresh the page is loaded.

Also set on Next there is a lot of themes, here introduced here, more theme settings you can refer to the official document: https: //theme-next.org/docs/.

article

Creates a new "HelloWorld" article, the following command:

hexo new hello-world

Creating article will appear in the source/_postsfolder, is MarkDown format.

Add the necessary information at the beginning of the article the following format:

---
title: 标题 # 自动创建，如 hello-world
date: 日期 # 自动创建，如 2019-09-22 01:47:21
tags: 
- 标签1
- 标签2
- 标签3
categories:
- 分类1
- 分类2
---

Beginning to write the text below, MarkDown can be written in the format.

This will automatically compile time to identify the next title, time, category, etc., in addition to some other parameter settings, refer to the documentation: https: //hexo.io/zh-cn/docs/writing.html.

Bookmark page

Now our only home blog, article pages, if we want to increase the tab, you can add their own, here Hexo also provided us with this function, execute the following command in the root directory:

hexo new page tags

After executing this command will automatically help us generate a source/tags/index.mdfile, only the content like this:

---
title: tags
date: 2019-09-26 16:44:17
---

We can add their own type a field to specify the type of the page:

type: tags
comments: false

Then in _config.yml file theme to add a link to this page of the main menu inside, modify menu fields are as follows:

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

You can see the left navigation also appeared label, then click on the right will display a list of labels

Classification and labeling similar to a paper may correspond to a category, if you want to increase the category page can be created using the following command:

hexo new page categories

Then Likewise, it will generate a source/categories/index.mdfile.

We can add their own type a field to specify the type of the page:

type: categories
comments: false

Then in _config.yml file theme to add a link to this page of the main menu inside, modify menu fields are as follows:

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

Such pages will increase support for classification of

Search Page

In many cases we need to search the contents of the entire station, it supports a search function is also necessary.
If you want to add support search, you need to install a plug-in, called hexo-generator-searchdb, command is as follows:

npm install hexo-generator-searchdb --save

Then add the item inside _config.yml search settings are as follows:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

Then _config.yml theme of which read 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

Here is the Local Search, if you want to enable other is Search Service, then you can refer to the official document: https: //theme-next.org/docs/third-party-services/search-services.

404 pages

You also need to add a 404 page directly in the root directory of the source folder file to create a new 404.md, content can be modeled as follows:

---
title: 404 Not Found
date: 2019-09-22 10:41:27
---
<center>
对不起，您所访问的页面不存在或者已删除。
您可以<a href="https://ihankleo.github.io>">点击此处</a>返回首页。
</center>
<blockquote class="blockquote-center">
    Hank
</blockquote>

There's some relevant information and links can be replaced with your own.
It can be added after this 404 page.

Completed the above configuration basically completed more than half, in fact, there are many, many Hexo function, introduced here, however, we can refer directly to the official document: https: //hexo.io/zh-cn/docs/ View more multi-configuration.

Deployment Script

Finally, I am here also added a simple version of the deployment script, in fact, re-gererate next file, and then re-deploy. Deploy.sh of a new script file in the root directory, as follows:

hexo clean
hexo generate
hexo deploy

We only need to perform when deployed release:

sh deploy.sh

You can complete update of the blog, it is very simple.

Custom domain name

You can be redeployed under the blog using the above script after page modify its contents will be updated accordingly.

In addition, we can also be arranged inside the GitHub Repository domain name, find Settings, pulled below, you can see the configuration of the items have a GitHub Pages

Here are a custom domain option, enter the domain name address you want to customize, and then add a CNAME resolved just fine.

In addition followed by a Enforce HTTPS option, GitHub Pages will automatically help us HTTPS service after we configure a custom domain name. Just finished configuring a custom domain name when this option may not be available for some time until it can be checked, can be checked directly, so the entire blog will become the HTTPS protocol.

Another place worth noting, if you configure a custom domain name, in the present case, each time the deployment of this custom domain settings will be automatically cleared. So to avoid this situation, we need to create a CNAME in directory project file, the path for the source / CNAME, content is the custom domain name.

For example, I created a new file in the source directory CNAME, says:

blog.xxx.com

This avoids the situation every time deployment of custom domain name was cleared up.

Here just attach yourself to build a good blog https://ihankleo.github.io/

These are the processes from scratch to build a Hexo blog, and we want to help.

References

https://realfavicongenerator.net
NightTeam team