This post was first posted on my blog, and you are welcome to watch and discuss 😉
preface
For programmers, the importance of blogging is self-evident. Here’s a picture from the Internet:
And as long as a cup of lucky money 😄 (buy domain name, don’t buy words is completely white piao) can have their own space, think about very excited, is not.
In addition to the specific process, I will also list some pits in the process of practice, hoping to help you.
Why Hexo + GitHub + Netlify + Cloudflare
Do not need cloud server, do not need to record, all free
Hexo
Hexo is a NodeJs-based static blog site generator written by Tommy Chen from Taiwan.
- Static files are generated quickly
- Support the Markdown
- Deploy to GitHub Pages and Heroku with a single command
- Octopress plug-in has been transplanted
- High scalability and customization
- Compatible with Windows, Mac & Linux
- Community themes, plugins, suitable for those who like to toss around
GitHub
The easiest and fastest way to build a blog is to use GitHub Pages, but the speed of domestic access to GitHub 😂; You may say that Coding Pages is fast to access in China, and it seems to have no disadvantages except advertising. People can also try Coding Pages, but it is not fun to do so.
Instead of deploying Github Pages as a hosted repository for blogs, we’ll just find a way to speed up access.
Netlify
Netlify is a static web hosting service that provides CI services and can host Jekyll, Hexo, Hugo and other static web sites on GitHub, GitLab, etc. It’s also very simple to use.
- You can host static resources
- Static websites can be deployed to the CDN to speed up domestic access
- When you commit changes to the Git repository, it automatically runs build Command for Continuous Deployment
- You can add custom domain names
- You can enable the free TLS certificate and enable HTTPS
- The most powerful CMS for managing static resources
- Built-in CI, support custom page redirection, custom insert code, packaging and compression JS and CSS, compression images, image processing
Cloudflare
Although Netlify has provided CDN acceleration, it found that the domestic access is still slow. Cloudflare’s CDN speed is slower than that of Chinese cloud service providers such as Qiniuyun and Aliyun, but it has a free version, and the most important thing is that the domain name does not need to be registered.
Start work time
Hexo generates blog projects
- The installation
npm install -g hexo-cli // or
yarn global add hexo-cli
Copy the code- Initialize the
hexo init "Blog Directory"
cd "Blog Directory"
npm install // or
yarn
Copy the code- The directory structure
. ├ ─ ─ _config. Yml ├ ─ ─ package. The json ├ ─ ─ scaffolds │ ├ ─ ─ draft. The md │ ├ ─ ─ page. The md │ └ ─ ─ post. The md ├ ─ ─ source │ └ ─ ─ _posts └ ─ ─ Themes └ ─ ─ landscapeCopy the code_config.yml
Global profile, where much of the site’s information is configured, such as site name, subtitle, description, author, language, topic, deployment, and so on.
# Site
title: Hexo # Website title
subtitle: # site subtitle
description: # Website Description
author: John Doe # the author
language: # language
timezone: # Site time zone. Hexo uses your computer's time zone by default. Time zone list. For example: America/New_York, Japan, and UTC.
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child'
## and root as '/child/'
url: http://yoursite.com # your site Url
root: / # the root directory of the site
permalink: :year/:month/:day/:title/ # Permalink format for articles
permalink_defaults: # Default values for each part of the permalink
# Directory
source_dir: source # resources folder, this folder is used to store content
public_dir: public # public folder, this folder is used to store the generated site files.
tag_dir: tags # Tag folder
archive_dir: archives # Archive folder
category_dir: categories # Category folder
code_dir: downloads/code # Include Code folder
i18n_dir: :lang # Internationalization (I18N) folder
skip_render: Skip rendering of specified files. You can use glob expressions to match paths.
# Writing
new_post_name: :title.md The file name of the new article
default_layout: post # Preset layout
titlecase: false Convert the title to the title case
external_link: true Open the link in a new TAB
filename_case: 0 Convert the file name to (1) lowercase or (2) uppercase
render_drafts: false Whether to show the draft
post_asset_folder: false Whether to start the Asset folder
relative_link: false Change the link to address relative to the root directory
future: true # Show future articles
highlight: # Set code blocks in content
enable: true # Turn on code block highlighting
line_number: true # display the number of lines
auto_detect: false # Enable automatic detection if no language is specified
tab_replace: # replace tabs with n Spaces; If the value is empty, tabs are not replaced
# Category & Tag
default_category: uncategorized
category_map: # class alias
tag_map: # tag alias
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD # date format
time_format: HH:mm:ss # time format
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 # number of pages
pagination_dir: page # paged directory
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape # theme name
# Deployment
## Docs: https://hexo.io/docs/deployment.html
# Setup the deployment part
deploy:
type: # type, commonly used git
Copy the codeYou can check the official website for detailed configuration.
scaffolds
Scaffolds means “scaffolds” and when you create a new article (hexo new ‘title’), Hexo builds from the files in this directory. Don’t really care.
source
This directory is very important because it is where all new posts are saved. _posts. Posts that need to be created are placed in the _posts directory.
Under _posts are markdown files. You should see a hello-world.md file where the article is edited.
Md files under _posts will be compiled into HTML files and put in the public folder (which you probably don’t have right now, because you haven’t compiled it yet).
themes
The theme directory of the site, Hexo has a very good theme expansion and supports a wide range of topics. In this directory, each subdirectory is a topic.
- Generate the article
hexo new post "First blog" // the file 'first blog. Md' will be generated in the source/_posts/ directory
hexo g // Generate static HTML files in /public folder
hexo s // Run the Server preview locally and go to http://localhost:4000 to preview your blog
Copy the codeYou can view detailed CLI commands on the official website
Add the NPM script
// package.json
scripts: {
"build": "hexo generate",
"clean": "hexo clean",
"server": "hexo server",
"netlify": "npm run clean && npm run build"
}
Copy the codeManaged to making
- Create warehouse | Create a new repository
- Local items are pushed to remote servers
git init
git add .
git commit -m "my blog first commit"Git remote add origin [email protected]: git git push -u origin masterCopy the codeConnection Netlify
- Sign up for Netlify and log in
- Create a site
- Connect the lot
- Select the project you just uploaded
- Select the build branch, build command, and static file directory and click Deploy Site to publish
- When you’re done building, you’ll see that there’s a url here, and you’ll have your blog
- You can click Domain Settings below to customize the secondary Domain name
- You can enjoy your blog
Each subsequent commit to the Master branch triggers an automatic Netlify build.
Many blog posts have you install a dependency package called Hexo-deployer-git, which commits the public folder to a separate branch and Netlify binds to that branch, doesn’t need Netlify build, hosts Netlify as a static file, CI has been dropped.
Buy a domain name
- Buy a domain name
- Configuring Domain Name Resolution
- Set CNAME as shown in the following figure, pointing to the domain name set in Netlify
- You’ll be able to access it in a moment
Cloudflare acceleration
- Register for Cloudflare and log in
- Add site
- Choose the free plan
- Adding a DNS Record
Pit 1:
CNAME: A, AAAA, CNAME: AAAA, CNAME: AAAA, CNAME: AAAA, CNAME: AAAA, CNAME: AAAA, CNAME: AAAA The DNS translates A domain name into an IP address. Therefore, when resolving A domain name, you need to add A (IPV4) or AAAA (IPV6) to refer the domain name to the IP address. However, sometimes it is necessary to set multiple domain names pointing to the same IP address. In this case, we can set the resolution of other domain names to CNAME type and fill in the record value to the domain name with A or AAAA directly pointing to the IP address. This avoids the need to reset multiple domain name resolution for server IP changes. Just to put it bluntly, A or AAAA is A domain name pointing directly to IP, and CNAME is A domain name pointing directly to another domain name.
Generally, Cloudflare will detect several DNS records, most of which are of type A or AAAA. Since we are forwarding, it should be of type CNAME. So delete them all and add them manually.
As shown, replace the name with your domain name and fill in your blog’s Netlify address. The name of WWW does not need to be modified, the modified content is the same as above.
Knowledge supplement 2: There are usually two ways to accelerate CDN. One is that the CDN service provider provides a domain name and then sets your domain name CNAME to point to this accelerated domain name. Another option is for the CND service provider to provide several NS (DNS resolution server) addresses and then overwrite the NS address of your domain name. Cloudflare does the latter
- Modify the NS
Change the address provided by the DNS server for CloudFlare at your DNS provider and click Finish.
- Set mandatory HTTPS and file compression
-
Click Finish, set up, NS mode modification will take longer to take effect, the official website says within 24 hours, but generally not so long, wait patiently. Cloudflare will send you an email after success, or you can see it if you log back into the console.
-
Inspection results
The Server field that returns the header has changed from Netlify to Cloudflare, which should be much faster.
🎉 Congratulations, your blog has been set up and you can now start writing articles.
writing
In the Theme | Theme
Hexo’s default theme style is not appreciated and there are many themes available for download in the community. I used a minimalist Next theme.
The setting steps are as follows:
- Fork theme projects to your repository on GitHub
- Execute in your Hexo project
Git themes/ git submodule add [email protected]:Copy the codeHow to use git submodule can be found in Google.
- Change the theme value in the root _config.yml file to the theme name you use
- Local view effect
npm run netlify
hexo s
Copy the code- The theme folder also has _config.yml, which is the theme configuration file, customized according to your preferences.
- Commit to remote server to update online blog.
Pit 2:
Netlify build logs failed to update the subModule topic project:
Add the Deploy key to GitHub
Add the blog comments | Gitalk
Refer to this section for Settings
Callback be sure to fill in your domain name so that github login in the comments will correctly jump back to your blog.
3 the pit
Once deployed online, the Gitalk component will appear at the bottom of your post, but you’ll find something like this:
Some may report network error.
Here’s why:
- The global configuration of hexo _config.yml for the article URL path looks like this:
permalink: :year/:month/:day/:title/
Copy the codeIf your title is in Chinese, this will result in a long address in your post’s address bar. This will bring two problems. First, if you modify the title of the article, the original address will be invalid and the SEO will be gone. Second, Gitalk needs to create an issue in GitHub, and the label length of the issue must be less than 50. Gitalk will take the path of the address bar as the label, so gitalK connection will fail.
Use the hexo-Abbrlink plugin to resolve the path beyond:
npm i hexo-abbrlink --save-dev
Copy the codeModify _config. Yml
# abbrlink config
abbrlink:
alg: crc16 #support crc16(default) and crc32
rep: hex #support dec(default) and hex
# change permalink value
permalink: p/:abbrlink.html
Copy the codeRerun the static build
npm run netlify
Copy the codeThe generated article URL will look like this:
https://yourwebsite.com/p/37232.html
Copy the codeRest assured, generate will not change after each time.
- You also need to add an issue for each article to initiate comments.
-
Add an issue to your GitHub blog project
-
-
Add label to Gitalk and your post path (e.g. /p/37232)
- Then recommit, wait for Netlify to build, and see if Gitalk is ready to comment at the bottom of your post
The end
That’s all you need to know. If you follow the steps, you should be done. Hexo and Netlify have a lot of fun features to check out, I’m still working on 😵.
The so-called all things are difficult at the beginning, in fact, otherwise, the most difficult is to adhere to, this is my second article, after will continue to write, also look forward to peer with you, mutual encourage 😁.
“Stay Hungry, Stay Foolish.
If there are any mistakes or additions, please feel free to comment.