Introduction
I have written a few blogs on CSDN before, but I always feel that the interface is not concise enough, and I am not very happy when writing a blog. I want to write a personal blog by myself. I took this opportunity to contact hexo and record it.
PS: The following process is based on the Windows system. Most of the references teach you how to build a github technical blog. I rearranged it according to my actual situation. Students who use Mac OS can refer to 20 minutes to teach you how to use hexo to build a github blog.
Install
Download git and Node.js and perform the installation
Install hexo
NPM is a package management tool installed together with NodeJS, which can solve many problems in NodeJS code deployment. The common usage scenarios are as follows:
- Allows users to download third-party packages written by others from the NPM server for local use.
- Allows users to download and install command-line programs written by others from the NPM server for local use.
- Allows users to upload their own packages or command-line programs to the NPM server for others to use.
Since the new version of Node.js has integrated npm, npm has also been installed before. I prefer to use PowerShell for Windows, which contains some Linux commands, and vim can also be used.
Then install hexo using npm:
npm install -g hexo
During the installation process, I got a warning: This package is no longer maintained, which can be ignored for the time being.
Create a hexo file and install dependencies
After the installation is complete, execute the following command in the folder to create all the files needed for the website in the current directory
hexo init
See:
INFO Start blogging with Hexo!
Indicates that the establishment is complete, execute the following command to install the required dependencies:
npm install
Local browsing
hexo generate hexo server
Here hexo uses the local port 4000 by default. After I opened it for the first time, I found that I couldn’t access it. After thinking about it, it should have been occupied. Query:
netstat -aon | grep 4000 tasklist | grep last command result last PID
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Tq0YEzLa-1689613636070)(http://image.rexking6.top/img/hexo_1.png)]
It is Foxit, so manually change the port:
hexo s -p 5000
The s here is the abbreviation of server, and the commonly used abbreviations will be given below. After the above command is executed, the browser visits: 127.0.0.1:5000, and you can see that the local blog has been set up . The next thing we need to do is deploy to GitHub.
New website project directory
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-GKAZuw17-1689613636071)(http://image.rexking6.top/img/hexo_2.png)]
Pay attention to the format, yourname.github.io
Generate SSH key and add
ssh-keygen -t rsa -C "your email address", press 3 carriage returns, the password is empty.
Under C:\Users\Administrator.ssh, get two files id_rsa and id_rsa.pub. Open id_rsa.pub and copy the full text. Add SSH key, paste it in.
hexo directory structure
├── .deploy #Files that need to be deployed
├── node_modules #Hexo plugin
├── public #generated static webpage file
├── scaffolds #template
├── source #Blog text and other source files, 404, favicon, CNAME should all be placed here
| ├── _drafts #drafts
| └── _posts #article
├── themes #theme
├── _config.yml #Global configuration file
└── package.json
Global configuration _config.yml
# Hexo Configuration ## Docs: http://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site # Site information title: #title subtitle: #subtitle description: #Site description, for search engines author: #author email: #email language: #language # URL # link format url: #URL root: / #Root directory permalink: :year/:month/:day/:title/ #The link format of the article tag_dir: tags #tag directory archive_dir: archives #archive directory category_dir: categories #category code_dir: downloads/code permalink_defaults: # Directory #directory source_dir: source #source file directory public_dir: public #generated web page file directory #Writing #writing new_post_name: :title.md #new post title default_layout: post #Default template, including post, page, photo, draft (article, page, photo, draft) titlecase: false #The title is converted to uppercase external_link: true #Open the connection in a new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false highlight: # syntax highlighting enable: true #whether to enable line_number: true #display line number tab_replace: # Category & amp; Tag #Classification and tags default_category: uncategorized #default category category_map: tag_map: # Archives 2: Turn on pagination 1: disable pagination 0: disable all archive: 2 category: 2 tag: 2 # Server # local server port: 4000 #port number server_ip: localhost #IP address logger: false logger_format: dev # Date / Time format #Date time format date_format: YYYY-MM-DD #refer to http://momentjs.com/docs/#/displaying/format/ time_format: H:mm:ss # Pagination # pagination per_page: 10 #Number of articles per page, set to 0 to disable pagination pagination_dir: page #Disqus #Disqus comments, replaced with more to say disqus_shortname: # Extensions #Extension plug-in theme: #theme exclude_generator: plugins: #Plugins, such as those that generate RSS and sitemaps -hexo-generator-feed -hexo-generator-sitemap # Deployment #Deployment, change lmintlcx to username deploy: type: git repo: Just now github created the library address.git branch: master
Notice:
- Colon: followed by a space
- repo: Just now github created the library address.git
hexo common commands
hexo help #View help hexo init #Initialize a directory hexo new "postName" #New article hexo new page "pageName" #New page hexo generate #Generate web pages, you can view the files of the entire website in the public directory hexo server #Local preview, 'Ctrl + C' off hexo deploy #deployment.deploy directory hexo clean #Clear the cache, **It is strongly recommended to clean the cache before each command execution, and delete the .deploy folder before each deployment**
Shorthand
hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy
New article
hexo new "Title"
The file title.md will be generated under the _posts directory
--- title: Hello World date: 2015-07-30 07:56:29 #Publish date, generally not changed categories: hexo #article category tags: [hexo,github] #Article tags, use this format when there are more than one item ---
Text, written in Markdown syntax, saved after editing, previewed by hexo server
Deployment
Execute the following instructions to complete the deployment.
hexo generate hexo deploy
When I deployed here, it was not successful, and an error occurred
ERROR Deployer not found: git
It turns out that you need to install this:
npm install hexo-deployer-git --save
Execute again, and the following prompt will appear, indicating that the deployment is complete:
[info] Deploy done: git
Click on the Settings of the project on Github, GitHub Pages, prompt Your site is published at https://rexking6.github.io/ (this is my own)
Summary
In the process of building a blog, I found that hexo is really simple and easy to use. For someone like me who has never learned the front end, it is really a magic weapon. I also realized the power of github’s ability to deploy websites, and then I wanted to make a deployment record of the two websites, and also bind the Ali domain name and map bed, and I would also write it out.