Android technology people, hope to let you see the different side of the app monkey, in addition to sharing Coding, career experience, interview experience, learning experience, life experience and so on. Hopefully through this public account, we will not only type code, we will also…

Small talk

When I was a junior, I always wanted to build a blog of my own, but due to various reasons, it finally failed. Just recently, I was more free, so I set up my own blog by referring to online tutorials.

Why build your own blog?

Haha, probably in order to install force, at the same time their own blog, style choice is relatively free, you can choose, do not need to be limited to each major platform.

Use Hexo+Github to build your own blog

It can be roughly divided into the following steps

  1. Setup environment preparation (including node.js and Git environment, gitHub account configuration)
  2. Install Hexo
  3. Configuration Hexo
  4. How do I associate Hexo with the Github page
  5. How to Publish an article
  6. Subject to recommend
  7. Simple configuration of topic Net
  8. Add sitemap and feed plug-ins
  9. Add 404 public welfare page

Setting up an environment

It can be roughly divided into three steps

  • Node.js installation and preparation
  • Git installation and preparation
  • GitHub account configuration

Configure the Node.js environment

  1. Download the Node.js installation file:
  • Windows Installer 32-bit
  • Windows Installer 64-bit

Select the appropriate installation file for your Windows version, or if you don’t know, install a 32-bit one. As shown in the figure:

Keep the default Settings, go Next, and the installation will be over soon. Then we check that all required components are installed and press Win and R to open the run window:

Windows operating interface

Enter CMD in the new window and press Enter to open the CLI. In the command line interface that opens, enter

node -v
npm -v
Copy the code

If the result is as shown in the following figure, the installation is correct and you can proceed to the next step. If not, go back to check your own installation process.

Configuring the Git Environment

Git installation file download:

GIt website download address:

Git – 2.6.3-64 – bit. Exe

Then enter the Git installation interface, as shown in the picture:

Git Installation interface

As with Node.js, most Settings need to be left as default, but for ease of use, it is recommended to select the PATH option as shown below:

Git PATH set

Git Bash is the only place where you can perform Git operations. This option will cause the Git installer to add Git to your system PATH, allowing you to invoke Git from the CMD interface without having to open Git Bash. To verify that Git is installed correctly, open the command line and type:

git --version
Copy the code

If the result is as shown in the following figure, the installation is correct and you can proceed to the next step. If not, go back to check your own installation process.

For more information on how to download and install Git, see my post on Git Downloads and Configuring environment Variables

Github account registration and configuration

If you already have an account, skip this step ~

Step 1: Sign up for Github

Open https://github.com/ and enter your user name, email address and password in the box below.

Then go to the email address you just filled in and click on the confirmation letter Github sent you to confirm your registration and end the registration process.

Be sure to confirm your registration or you won’t be able to use GH-Pages!

Step 2: Create the code base

Once logged in, click the plus sign in the upper right corner of the page and select New Repository:

New code base

Go to the code base creation page:

Put yourname.github. IO under Repository Name and Description (optional) with some simple descriptions, as shown below:

IO to xujun.github. IO to xujun.github. IO to xujun.github

Step 3:. Code base setup

Once created correctly, you should see the following screen:

To enable gh-Pages, click Settings on the right side of the screen to open the library’s setting page, drag down until you see GitHub Pages, as shown in the picture below:

Github pages

Click on Automatic Page Generator and Github will automatically create a GH-Pages page for you. Github. IO will be available in about 15 minutes. If yourname.github. IO is available, github configuration is complete.

Now that the configuration of the hexo blog environment is complete, let’s start with the configuration of Hexo

Install Hexo

Create a hexo folder where you see fit. I’ll use E: /hexo as an example. First, create the hexo folder in the E drive directory and access it from the command line window

On the command line, enter:

npm install hexo-cli -g
Copy the code

Then you will see:

You may see a WARN, but don’t worry, it won’t affect your normal use. Then enter

npm install hexo --save
Copy the code

Then you’ll see that the command line window is plastered with white text, so let’s see if Hexo is installed. On the command line, enter:

hexo -v
Copy the code

If you see the text, the installation is successful.

Configuration of Hexo

Initialize Hexo

Following the above operation, enter:

hexo init
Copy the code

Then type:

npm install
Copy the code

NPM will then automatically install the components you need, just wait for NPM to do so.

First experience with Hexo

To continue, again from the command line, type:

hexo g
Copy the code

Then type:

hexo s
Copy the code

It will then prompt:

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

Open http://localhost:4000/ in your browser and you will see:

By now, the local configuration of Hexo is complete.

How do you associate Hexo with a Github page

How do I associate Hexo with the Github page

It can be divided into the following steps

  • Configure git personal information
  • Configure Deployment

Configure Git personal information

If you’ve already configured your Git profile, skip this step and go straight to Git

Git user name and email (for the first time)

git config --global user.name "xujun"
git config --global user.email "[email protected]"
Copy the code

2. Generate a key

 ssh-keygen -t rsa -C "[email protected]"
Copy the code

Configure Deployment

Also in the _config.yml file, locate Deployment and modify as follows:

deploy:
  type: git
  repo: [email protected]:yourname/yourname.github.io.git
  branch: master
Copy the code

Such as my warehouse address is [email protected]: gdutxiaoxu/gdutxiaoxu lot. IO. Git, so the configuration is as follows

deploy:
  type: git
  repo: [email protected]:gdutxiaoxu/gdutxiaoxu.github.io.git
  branch: master
Copy the code

Write blogs and articles

To create a new blog post, execute the following command:

hexo new post "article title"
Copy the code

In my computer’s directory F: hexo\source\ _posts will now see the article title.md file

Open with the MarDown editor to edit the article. Once the article is edited, run the build and deploy commands:

Hexo g // Generate hexo D // deployCopy the code

Of course, you can also execute the following command, which is equivalent to the above two commands

hexo d -g Get ready before deployment
Copy the code

After successful deployment visit your address, yourname.github. IO (enter my address here: gdutxia.github. IO) and you will see the generated article.

Hit the pit to remind

  • 1) Note that an extension needs to be installed in advance:
npm install hexo-deployer-git --save
Copy the code

If there is no executor line command, it will be alerted

deloyer not found:git

  • 2) If the following error occurs,

Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.

The public key is not set properly. Git SSH config Git SSH config Git SSH config Git SSH config Git SSH

Subject to recommend

Each topic requires a different configuration. The topic configuration file is in the topic directory _config.yml. There are two good themes to recommend.

Yilia

Yilia is a theme made for Hexo 2.4+. Advocate simple elegance, as well as the ultimate performance.

Yilia address

NexT

My website is to adopt this theme, simple and beautiful. Currently the highest Star Hexo theme on Github supports several different styles. The author provides very complete configuration instructions.

Net topic configuration

There are two main configuration files in Hexo, both named _config.yml. One, located at the root of the site, contains the configuration of Hexo itself; The other is in the topic directory, and this configuration is provided by the topic author to configure topic-related options.

For ease of description, the former is referred to as a site profile and the latter as a topic profile in the following notes.

For example, on my computer, the F: hexo directory becomes the site configuration file and the F: hexo\ Themes \ Next directory becomes the theme configuration file.

1) Install NexT

The way Hexo installs a theme is as simple as copying the theme file to the Themes directory of the site directory and modifying the configuration file. For NexT, the installation steps are as follows.

Download the theme

If you are familiar with Git, it is recommended that you clone the latest version of Git so that subsequent updates can be quickly updated through Git pull without having to download the replacement package again.

Clone latest version Download Stable version In the terminal window, navigate to the Hexo site directory. Use Git checkout code:

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

2) Enable themes

The same mode as is enabled for all Hexo themes. When the clone/download is complete, open the site configuration file, find the theme field, and change its value to Next.

Enabling the NexT theme

theme: next
Copy the code

At this point, the NexT theme is installed. Next we will verify that the theme is enabled correctly. It is best to use Hexo Clean to clear the Hexo cache after switching themes but before validation.

3) Validate the topic

Start the Hexo local site and enable debug mode (that is, add –debug). The entire command is Hexo s –debug. During the service startup process, watch the command line output for any exception messages. If you encounter problems, this information will help others better locate the error. When the command line output displays:

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

At this point, use a browser to visit http://localhost:4000 and check that the site is running correctly.

You have successfully installed the NexT theme when you see a site that looks like the one below. This is NexT’s default Scheme — Muse

You have now successfully installed and enabled the NexT theme. Next we will change the Settings of some topics, including personalization and integration with third party services.

4) Theme setting

Selection Scheme

Scheme is a feature that NexT provides, with the help of Scheme, to give you a variety of different looks. At the same time, almost all configurations can be shared between Schemes. Currently, NexT supports three schemes, which are:

Muse-default Scheme, which was the original NexT version, with a black and white accent and a compact version of Mist - Muse with plenty of white space, the neat, single-column look of Mars-Two-column Scheme, the fresh Scheme of little house by changing the theme profile, Search for the scheme keyword. You'll see three lines of Scheme configuration, which you'll need to use before scheme is enabledCopy the code

Just comment #.

Choose Pisce Scheme

#scheme: Muse
#scheme: Mist
scheme: Pisces
Copy the code

5) Set the language

Edit the site configuration file to set language to the language you need. It is recommended to specify the language you need, for example, simplified Chinese, as follows:

language: zh-Hans
Copy the code

The languages currently supported by NexT are shown in the following table:

language code Set the instance
English en language: en
Simplified Chinese zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt
Traditional Chinese Useful – hk or useful – tw language: zh-hk
Р с с seem и й second з ы seem ru language: ru
Deutsch de language: de
In Japanese language ja language: ja
Indonesian id language: id

6) Setup menu

Menu configuration consists of three parts, the first is the menu item (name and link), the second is the display text of the menu item, the third is the corresponding icon of the menu item. NexT uses ICONS provided by Font Awesome, which provides 600+ ICONS for most scenarios without worrying about blurriness on the Retina screen.

Edit the theme configuration file to modify the following:

Set menu content, the corresponding field is menu. The menu content is set in the following format: item Name: Link. Item name is a name that does not appear directly on the page, but is used to match ICONS and translations.

Menu Example Configuration

menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html
Copy the code

If your site runs in a subdirectory, remove the/prefix from the link

The default menu items for NexT are:

The key value The set value Display text (Simplified Chinese)
home home: / The home page
archives archives: /archives Archive page
categories categories: /categories Category pages
tags tags: /tags TAB
about about: /about On the page
commonweal commonweal: /404.html The public in 404

Sets the display text of the menu item. The name of the menu set in the first step is not directly used for presentation on the interface. Hexo will use this name to look up the corresponding language translation and extract the displayed text when it is generated. These translations are placed in the NexT theme directory languages/{language}.yml ({language} is the language you use).

Take simplified Chinese for example, if you need to add a menu item, such as something. You need to modify the translation file languages/zh-Hans.yml corresponding to simplified Chinese and add an item under the menu field:

Menu: home archives: Categories tags about search commonweal 404 somethingCopy the code

Sets the icon of a menu item. The corresponding field is menu_icons. The format is Item Name: Icon name, where item name corresponds to the menu name configured in the previous step, and icon name is the name of the Font Awesome icon. While enable controls whether ICONS are displayed, you can set it to false to remove ICONS.

Example of menu icon configuration

menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
Copy the code

With the menu icon on, NexT will use the icon if the menu item does not match the menu (no setting or invalid Font Awesome icon name).

Note that key values (such as home) match case strictly

7) ** sidebar **

By default, the sidebar is displayed only when the article page has a list of directories and is placed to the right. You can control the behavior of the sidebar by modifying the sidebar field in the topic configuration file. The setup of the sidebar consists of two parts, one is the position of the sidebar, and the other is the timing of the sidebar display.

Set the position of the sidebar and change the value of sidebar.position. The options are as follows:

Left - placed on the left - placed on the rightCopy the code

Currently, only the Pisces Scheme supports position configuration. Affects versions 5.0.0 and later.

sidebar:
  position: left
Copy the code

Set the time displayed in the sidebar and modify the value of sidebar.display. The options supported are:

Post - Default behavior, always - show hide in all pages - hide in all pages (can be manually expanded) remove - Completely remove sidebar: display: postCopy the code

It is known that the sidebar will not be displayed if use Motion: false is used. Affects versions 5.0.0 and later.

8) Set your avatar

Edit the site configuration file, add the field avatar, and set the value to the link address of the avatar. Where, the link address of the avatar can be:

address value
The full Internet URI example.com/avtar.png
The address within the site Set the avatar to source/uploads/ (if the new uploads directory does not exist) or place the avatar in source/images/ and set it to avatar: /images/avatar.png

Example for Setting profile pictures

avatar: http://example.com/avtar.png
Copy the code

9) Set author nicknames

Edit the site configuration file and set author to your nickname.

10) Site description

Edit the site configuration file and set

Field for your site description. The site description can be a signature you like 🙂

The official document address of a.NET topic

Add the plug-in

Add sitemap and feed plug-ins

Switch to your local hexo directory, CIA, in a command line window, and run the following command

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save
Copy the code

Modify _config.yml and add the following content

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
#sitemap
sitemap:
  path: sitemap.xml
Copy the code

Run the following command to deploy the server

hexo d -g
Copy the code

After a match, you can access gdutxiaoxu. Making the IO/atom XML and gdutxiaoxu. Making. IO/sitemap XML, found that the two files has been successfully created.

Adding a 404 page

GitHub Pages provides guidelines for creating 404 Pages: Custom 404 Pages create your own 404.html or 404.md directly in the root directory. However, custom 404 pages only work for projects that are bound to top-level domains, GitHub’s default assigned secondary domains don’t work, and using Hexo Server on native debugging doesn’t work either.

Tencent commonweal 404 is recommended

My 404 page configuration is as follows

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="https://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="gdutxiaoxu.github.io"
        homePageName="Back to my home page.">
</script>

</body>
</html>
Copy the code

Refer to the blog

Hexo home page

The most detailed Hexo blog setup tutorial ever

My Git series reference tutorial

  • Git downloads and configures environment variables
  • Git command line tutorial and example tutorial
  • Git SSH configuration and use
  • Git SSH configures multiple accounts
  • Git Config instruction
  • Git configuration aliases — make commands easier
  • Git set mergetool and Difftool to BeyondCompare
  • Git patch – Diff and patch usage details

Use Hexo+Github to build your own blog

Please follow my wechat official account by scanning the QR code below or searching my wechat account Stormjun. Currently, I focus on Android development, mainly sharing Android development related knowledge and some relevant excellent articles, including personal summary, workplace experience and so on.