Remember to follow me and keep sharing your notes on programming development, data analysis, machine learning and so on.

One, foreword

Hi everyone, I am the cousin of Ace love Cat love Technology. Recently, I have been researching personal blog building. Currently, I am working on Django personal blog building series, and recently I learned that there are many ready-made blog building frameworks.

This article is based on the Hexo framework to build a personal blog, the whole process is very simple, if successful, it may only take 10-20 minutes to build a perfect deployment of your own personal blog, remember to like ~

Ii. Basic Introduction to Hexo

Hexo is a fast, simple, and powerful blogging framework. You write a post in Markdown (or some other markup language), and Hexo generates a static file with a nice theme in seconds.

Hexo+Github blog building process

4. Start using your head

First, Hexo’s official website: hexo.io/

To see the full description of Hexo, scroll down and click Get Started to access the Hexo Usage documentation or go directly to hexo. IO /docs/.

4.1 Basic Preparations

Before you start, make sure you have: 1. A GitHub account, which can be registered directly to github.com. 2

Git installation can be done in a variety of ways. The easiest way to install Git is to download the software package directly from the official website and install it (for Mac, Windows and other versions).

https://git-scm.com/downloads
Copy the code

Macs can be used directlybrew install gitInstall git by default, or install package management tools such as yum and apt-get.

You can also download the installation package of Node.js from the official website and install it step by step.

https://nodejs.org/zh-cn/download/
Copy the code

By default, node.js and NPM (node.js package management tools) will be installed.

In Windows, you may need to set environment variables. Add the installation directory to the environment variables and search for the corresponding method in the browser.

Check the versions of Git and Node.js to ensure that the installation is correct.

git --version
node -v  
npm -v
Copy the code

4.2 installation Hexo

First we need to create a new Project directory. In my case, I will create a HexoBlog folder under the Project directory on my desktop to store the files related to the Project.

cd Desktop/Project/
mkdir HexoBlog&&cd HexoBlog
Copy the code

If you install Hexo by running the following statement, you may encounter rollbackFailedOptional.

npm install -g hexo-cli
Copy the code

This is because of network problems (the NPM server is located in foreign countries and the download is slow), you can use CNPM (domestic mirror made by taobao team) to obtain the image or directly modify the NPM resource to obtain the address of the domestic.

# installation CNMP
npm install -g cnpm --registry=https://registry.npm.taobao.org

# Alter NPM resource access address (recommended)
npm config set registry http://registry.npm.taobao.org
Copy the code

I also ran into file write permissions myself,You can directly modify the directory file permission, for example:

chmod -R 777 /usr/local/lib
Copy the code

After solving the above problems, we can successfully install ~ (as shown in the screenshot below)

4.3 Initializing a Hexo Blog

Now that we have all the relevant environments ready, let’s initialize a Hexo blog. The command for initialization is Hexo init < project name >, which we’ll call blog for now.

hexo init blog
Copy the code

After successful initialization, a new folder is generated under the current folderblog, directory structure is as follows:

├─ _config.landscape. Yml: Theme Configuration file, if ├─ _config.yml: site configuration file, configure the site. ├── node_modules: Used to store installed dependency packages. ├─ Package-lock. json: Package version depends on lock file. ├─ Package. json: Application data, version of Hexo and related dependency package version etc. ├── Scaffolds: Blog Templates folder for Page. Md, Post. Md, and Draft.MD. ├ ─ ─source: Resource folder, storing static resources such as blog MD files, images, etc. ├ ── themes, Hexo generates static web sites by combining web content with themes.Copy the code

After initializing the project, we can preview it locally by simply executing the following command locally,

cd blog
hexo s
Copy the code

First we need to go to the new project directory, and then executehexo sCan launch the project, and then we accesshttp://localhost:4000/You can view the websiteCurrently the default theme, plus a default blog postHello World.

4.4 Hexo Basic Commands

  • Start the project locally. S stands for server
hexo s
Copy the code

  • Create a new blog, n for new
Hexo n [layout] <title> e.g. Hexo new"My first blog Hexo Hello!"
Copy the code

Layout indicates the layout of the article. This parameter is optional (Post Page Draft). By default, default_layout in _config.yml is used instead of (POST). Title indicates the title of the article. If the title contains Spaces, enclose them in quotation marks.

  • Generate static files, with g for generate
hexo g
Copy the code

  • To deploy the Hexo website, d stands for deploy
hexo d
Copy the code
  • Clear cache files (db.json) and generated static files (public)
hexo clean
Copy the code

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

4.5 Hexo Basic Configuration Modification

[Required changes] The basic Settings of the site, homepage title, sub-title, introduction, keywords (English, separated), author, language and time zone, all need to be modified, so as to count their own website.

# SiteTitle: my cousin's blog subtitle:'Ace love cats love technology'
description: Hexo+Github - Hexo+Github - Hexo+Github 'Keywords: Living, raising a cat,Python,Go, Data analysis,Web development'Asia/Shanghai'
Copy the code

Step on a pit, keywords: there must be a space between life, otherwise an error will be reported.

Restart the Hexo service and we will refresh the page to see that the above changes have taken effect. If not, you can run it firsthexo cleanClear the cache before executinghexo sStart the server.

[Optional change] Settings related to access paths

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
root: /
permalink: :title/
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # Set to false to remove trailing '.html' from permalinks
Copy the code

IO /themes/ I downloaded the theme from hexo. IO /themes/.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: amber
Copy the code

4.6 Deploying the Hexo blog to GitHub

First we need to create a new project on GitHub: github.com/new, the project name format should be…

At the same time, you need to configure the SSH key. For details, see:

Next we need to modify the configuration file _config.yml and slide down to the end to change the deployment information to:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git repo: [email protected]: your user name/your user name github.ioCopy the code

To deploy to GitHub, the related tool hexo-deployer-git needs to be installed.

npm install hexo-deployer-git --save
Copy the code

To do this, simply enter the command configuration, hexo Clean cleans the cached data, and Hexo G generates the relevant static files.

hexo clean 
hexo g
Copy the code

If I keep typinghexo dWhen deploying, an error is reported,Deployer not found: git This is because the Hexo project directory has not initialized Git yet, so run the following command to initialize git.

git init
Copy the code

Let’s type it in againhexo dWhen Hexo is deployed, the GitHub account and password will be required to input directly. After uploading, the GitHub page will be refreshed and some files will be found. The original readme will also be missinghexo gThe generated static file (in the blog/public directory) is uploaded to GitHub and overwrites all the original content.At this point, we’re accessing from within the browser

https://< your username >.github. IO /#, such as: https://xksa-me.github.io/
Copy the code

You can visit our blog home page, click on the blog can also enter the corresponding blog page.

Through the above, we have got an online personal blog, can access at any time and place, the whole operation process is very simple, trouble is upload update articles and deployment project, each deployment need to enter a password, and making server abroad, domestic access speed is also very worry, don’t worry. In later blog optimizations we will address these issues together and let the model run first.

4.7 Setting the Application domain Name

If you have a domain name, you can also set up an exclusive domain name, such as I bought a domain name in Ali Cloud, click to view, of course, you can also click here to view the domain name of Tencent cloud.

First of all, we need to resolve the domain name in the background of Ali Cloud domain name management. We resolve the domain name directly from our own to the github address of the blog.

Then go to GitHub to set the domain name of the project, go to project -> Settings -> Page -> Custom Domain, and write the CNAME we set.

Finally, we need to create a new one under the blog/source folder in our local projectCNAMEFile, edit and write to our domain name, which was just filled into GitHub.Execute the following command to update and deploy the project again,

hexo g
hexo d
Copy the code

After the deployment is successful, go directly to https://blog.python-brief.com/ to check out our blog

Five, the next episode

After the above operation, you will find that the setup is really simple, but the access is really slow!!

The main reason is that GitHub server is located abroad, so the solution is relatively simple. We can deploy the project to the domestic code cloud or Coding at the same time, and the whole process is similar to deploying the project to GitHub.

We will share the specific operation in the next section, remember to praise this article oh ~ what good blog framework can also be recommended to the message area old watch, I will step on the pit!