Hexo+Kaze+Gitee Pages build static blog sites

preface

The website itself is a big project, involving the front-end page construction, the storage of website data, but also the purchase of server resources, and even the maintenance of the late, the process is quite tedious.

But if you just want to build your own website, you want to blog, you want to look good, but you don’t want to worry too much about things that aren’t related to blogging. Then Hexo + Kaze + Gitee Pages is for you.

This article will show you how to use these three free techniques or services to build an accessible static blog site.

Hexo profile

What is Hexo?

Hexo is a fast, simple and powerful blogging framework. If you’re blogging with Markdown, Hexo can generate static files with beautiful themes in seconds.

Hexo installation

Lead requirements

Node.js (10.13 or later, 12.0 or later is recommended)
Git

Install Git

Windows: Download and install Git.
Mac: Use Homebrew to install.
Linux (Ubuntu, Debian) :sudo apt-get install git-core
Linux (Fedora, Red Hat, CentOS) :sudo yum install git-core

Installation Node. Js

Node.js provides an official installer for most platforms.

Alternative installation methods:

Windows: Install it using NVS.
Mac: Use Homebrew to install.
Linux (based on DEB/RPM) : Installed with NodeSource.
Others: Use the corresponding software package manager to install the software. See the guidance provided by Node.js.

Install Hexo

Install Hexo with NPM.

npm install -g hexo-cli
Copy the code

Use the following command to check whether the installation is successful.

hexo version
Copy the code

If you want to uninstall Hexo, use the following command:

npm uninstall -g hexo-cli 
Copy the code

Run hexo

Once installed, you can run Hexo through hexo . For example, get help using the Hexo Help directive.

hexo help
Copy the code

The hexo init command can create a new Hexo folder, which is essentially the site information generated by hexo. So let’s talk about how to build a site.

Hexo site

Initialization operation

Use the hexo init < Folder > directive to create site information in the specified folder. I usually use the domain name as the name, as follows:

hexo init java4u.cn
Copy the code

Site initialization:

When the site is initialized, the specified folder is generated:

The directory structure

Enter the site and take a look at the directory structure as follows:

These documents have their own responsibilities:

_config.landscape. Yml: Custom theme profile where landscape is the default theme. Other topics can be configured in this way.
_config.yml: indicates the global configuration file of the site.
Node_modules: node module folder. Contains executables and dependent resources.
Package-lock. json: version information of all modules in the node_modules file, source of modules.
Package. json: Information about the basic parameters of the Hexo framework and the plug-ins it depends on.
Scaffolds: Scaffolds means scaffolds, and scaffolds means scaffolds. When you create a new article, Hexo does an initial build based on the corresponding file in that folder.
Source: Resource folder. This is where you put your resources such as blog posts and pictures._postsMarkdown and HTML files under the folder are parsed and placedpublicUnder the folder. Other files or folders if the initial name is not_(underscore), will also be copied over.
Themes: themes folder. Hexo generates static pages based on themes.

With this structure, Hexo has the ability to generate static websites.

Local boot

Let’s start locally and see what happens. Enter the following command:

hexo server
Copy the code

Hexo will start the service and run the default generated website on port 4000 of this machine. You can go directly to http://localhost:4000 to see the homepage of the site, which is generated based on the default theme and has a default article.

This page is just a sample provided by the authorities, seeing it means your local environment is working. We can adjust the page elements by modifying the configuration.

The core configuration

The following is the configuration information that you need to know or modify.

package.json

This file lists the basic parameters of Hexo and the plug-ins it depends on. As you can see, EJS, Stylus, and Markdown renderers are all installed by default.

{
  "name": "hexo-site"."version": "0.0.0"."private": true."scripts": {
    "build": "hexo generate"."clean": "hexo clean"."deploy": "hexo deploy"."server": "hexo server"
  },
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^ 5.0.0"."hexo-generator-archive": "^ 1.0.0"."hexo-generator-category": "^ 1.0.0"."hexo-generator-index": "^ 2.0.0." "."hexo-generator-tag": "^ 1.0.0"."hexo-renderer-ejs": "^ 1.0.0"."hexo-renderer-marked": "^ 3.0.0"."hexo-renderer-stylus": "^ 2.0.0." "."hexo-server": "^ 2.0.0." "."hexo-theme-landscape": "^ 0.0.3"}}Copy the code

If you want to switch themes later, remove the last default theme dependency.

_config.yml

You can set web sites, urls, directories, articles, categories & labels, date/time formats, pages and extensions.

Web site

parameter	describe
`title`	Site title
`subtitle`	Website subtitle
`description`	Site description, used for SEO
`keywords`	Site keywords, support for multiple keywords.
`author`	The author of the article.
`language`	The language used on the site. For simplified Chinese users, different themes may need to be set to different values. Please refer to the documentation of your theme to set the values`zh-Hans`and`zh-CN`.
`timezone`	Site time zone. Hexo uses your computer’s time zone by default. Please refer to theList of time zonesSet, as shown in`America/New_York`.`Japan`, and`UTC`. General, it can be used for mainland China`Asia/Shanghai`.

URL

parameter	describe	The default value
`url`	Must starts with`http://` or `https://`	example.com
`root`	Site root directory, if subdirectories, set`/blog/`	/
`permalink`	The articlePermanent linkformat	`:year/:month/:day/:title/`
`permalink_defaults`	Default values for each part of the permalink
`pretty_urls`	rewrite`permalink`To beautify the URL
`pretty_urls.trailing_index`	Whether to keep the tail in the permalink`index.html`, is set to`false`When removing	`true`
`pretty_urls.trailing_html`	Whether to keep the tail in the permalink`.html`, is set to`false`To remove (Of the tail`index.html`invalid)	`true`

parameter	describe	The default value
`source_dir`	Resources folder, which is used to store content.	`source`
`public_dir`	Public folder, which is used to store the generated site files.	`public`
`tag_dir`	Label folder	`tags`
`archive_dir`	Archive folder	`archives`
`category_dir`	Classified folder	`categories`
`code_dir`	Include Code folder,`source_dir`Subdirectory under	`downloads/code`
`i18n_dir`	Internationalization (I18N) folder	`:lang`
`skip_render`	Skips rendering of specified files. Matched files will be copied to unchanged`public`Directory.

The article

parameter	describe	The default value
`new_post_name`	The file name for the new article	:title.md
`default_layout`	The default layout	post
`auto_spacing`	Add a space between Chinese and English	false
`titlecase`	Convert the title to title case	false
`external_link`	Open the link in a new TAB	true
`external_link.enable`	Open the link in a new TAB	`true`
`external_link.field`	For the entire website (`site`) or only for articles (`post`) to take effect	`site`
`external_link.exclude`	Domain name to exclude. The primary domain name and subdomain name are as follows`www`Need to be configured separately.	`[]`
`filename_case`	Convert the file name to (1) lowercase or (2) uppercase	0
`render_drafts`	According to the draft	false
`post_asset_folder`	Start theAsset folder	false
`relative_link`	Change the link to an address relative to the root directory. Absolute addresses are recommended.	false
`future`	Shows future articles	true
`highlight`	Code block setup, seeHighlight.js section for usage guide
`prismjs`	Code block setup, seePrismJS section for usage guide

Categories & Labels

parameter	describe	The default value
`default_category`	The default classification	`uncategorized`
`category_map`	Classification of alias
`tag_map`	Label the alias

Date/time format

Hexo uses moment.js to parse and display the time.

parameter	describe	The default value
`date_format`	The date format	`YYYY-MM-DD`
`time_format`	Time format	`HH:mm:ss`
`updated_option`	When Front Matter is not specified`updated` 时 `updated`, mtime(when the file was last modified), date(using the value of date), empty(not specified)	`mtime`

paging

parameter	describe	The default value
`per_page`	Number of articles displayed per page (0 = turn off paging)	`10`
`pagination_dir`	Page directory	`page`

extension

“Theme”

parameter	describe	The default value
`theme`	Current topic name. A value of`false`Disable themes when	landscape
`theme_config`	Topic configuration file. Configurations placed here overwrite those in the subject directory`_config.yml`The configuration in	None Initial Configuration
`deploy`	Setup for the deployment part
`meta_generator`	Meta generatorThe label. A value of`false`When Hexo does not insert the label in the header	true

“Deployment”

The configuration is as follows:

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]
Copy the code

parameter	describe	The default
`repo`	Repository address
`branch`	The name of the branch	`gh-pages` (GitHub) `coding-pages` (Coding.net) `master` (others)
`message`	Customize submission information	`Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}`)
`token`	Optional token value to authenticate with the repo. Prefix with `$` to read token from environment variable

Commonly used instructions

To create the article

Use the following commands:

hexo new "test"
Copy the code

Or for short:

hexo n "test"
Copy the code

Running server

Enter the following command to start the server and your site will launch at http://localhost:4000. During server startup, Hexo monitors file changes and updates automatically without requiring you to restart the server.

hexo server
Copy the code

Or for short:

hexo s
Copy the code

Generating static files

hexo generate
Copy the code

Or abbreviations

hexo g
Copy the code

Monitor file changes to regenerate immediately. This operation blocks the command.

hexo g --watch
Copy the code

Automatically deploy the site after it is generated.

hexo generate --deploy
Copy the code

The deployment of

Hexo provides quick and easy one-click deployment capabilities that allow you to deploy a website to a server with a single command.

hexo deploy
Copy the code

Or for short:

hexo d
Copy the code

Hexo theme

Why Kaze

Hexo’s default theme is landscape, but I find it unattractive, so I recommend Kaze, which has the following features:

Responsive design for desktop, tablet, mobile phone and other devices
Front-end performance optimization, fast loading, can be completed in the blink of an eye
- Image lazy loading, the application of lazy loading technology to speed up the generation of pages
- Resource compression improves the speed of local resource requests
- Streamlined design, no additional libraries such as Jquery
Support sidebar widgets such as recent articles and author cards
Enjoy the magic of the night in Dark mode
Code is highlighted to support PrismJS
Formula rendering, katex and MathJax support
Review system, integrated with Valine, Gitalk, and Livere
Traffic statistics and Google analytics support

Install Kaze

Enter under your site/themes

cd themes
git clone https://github.com/theme-kaze/hexo-theme-Kaze.git
Copy the code

Upon successful installation, the directory hexo-theme-kaze is generated.

Change the theme value in the site configuration file _config.yml to hexo-theme-kaze.

Start the Hexo service with the Hexo Server to see the effect.

You’ll see that the default theme has been generated, but many things are missing and need to be modified.

The topic configuration

This can be configured in the _config.yml file in the topic directory.

Theme colors

Configure in color, and here are the defaults.

color:
  text-color: "#3c4858"
  text-strong-color: "#2f3d4e"
  text-light-color: "#909faf"
  divider-color: "#e6e8ee"
  title-color: "#475b6d"
  link-color: "#3273dc"
  link-hover-color: "#6596e5"
  info-text-color: "#909faf"
  widget-background-color: "#fff"
  body-background-color: "#f2f5f8"
  border-color: "#e1e4e9"
  pre-color: "#2d2d2d"
  code-color: "#50687c"
  code-background-color: "#e9eaf0"
Copy the code

Size and font

Configure in font, and here are the defaults.

font:
  font-size: 16px # global font-size
  font-family: '-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif' # global font-family
Copy the code

Site Access Statistics

Access statistics Currently, the statistics function is disabled by default. You can collect statistics on the total number of visits and visitors to a site.

footer: #------------------------ # pv / uv statistics config #------------------------ statistics: enable: false type: busuanzi # now version only supports busuanzi pv: enable: true style: The style will be shown as $1{pv}$2 uv: enable: true style: the style will be shown as $1{uv}$2Copy the code

The data analysis

analytics:
  enable: false
  type: google # google
  google:
    id:
Copy the code

Enable Enable analysis support (disabled by default)

Type 'currently only supports' GoogleCopy the code

Google.id For details on how to use Google Analytics and how to use the ID, refer to the Google documentation

Home page

The article first figure

In the front-matter article banner_img can set the home page header

The widget

widgets:
  showWidgetsMobiles: "none"
Copy the code

ShowWidgetsMobiles: Whether widgets are displayed on narrow screens, None off (default), Flex on

about

To create your own pages, create an about folder in site Source and create index.md in the folder. This file must contain at least one of the following

# at ${yoursite}/about/index.md -- title: about layout --Copy the code

Social link

In Social_Links under About, the theme icon relies on iconfont and has some social ICONS built in. You can customize other icon files or solutions to add custom ICONS.

about:
  description: description
  social_links:
    - { icon: icon-github, link:  https://xxx}
    # - { icon: icon, link: your link }
Copy the code

Friends of the chain

You can fill in the following format to generate a page of friendship chain

links:
  example-name-1: 
    url: https://example.com
    avatar: https://example.com/avatar.jpg
  example-name-2: 
    url: https://example.com
    avatar: https://example.com/avatar.jpg
Copy the code

The article page

The search function

search:
  enable: true
  path: search.json
  field: posts
  searchContent: true
Copy the code

enableEnable the search function (default)
pathFile name (not currently useful)
fieldThe scope of the need to search support posts | pages | all
searchContentSearch whether the file contains body content (not recommended, including all the content of the article will make the search file extremely large). The alternative is to search for classified tags or use a third party search service such as Algolia (Todo).

Code highlighting

See the code highlighting documentation

A mathematical formula

The theme supports both MathJax and KateX rendering engines, as described in the documentation

copyright

copyright: enable: true writer: # if writer is empty we will use config.author as writer declare: All posts on this blog, unless otherwise stated, Adopt the < a target = "_blank" rel = "noopener" href = "https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" > CC BY - NC - SA 4.0 Agreement < / a >. Reprint please indicate the source! style: warningCopy the code

Enable Copyright Description (Enabled by default)

Writer indicates the author ID. If this parameter is not specified, the topic configuration 'author' or site configuration 'author' will be usedCopy the code

Declare The content of the copyright declaration, which supports HTML statements

Style declares the content style, the same as note style

The author uses the writer parameter, the article link is generated based on the URL parameter in the site configuration file, and the copyright declaration parameter is declare

Front-matter

banner_img

Set the post and home page header

banner_img_set

An image is preloaded during image loading. You can set it to loading graph or thumbnail

excerpt

Set the introduction to be displayed on the front page of your article, and use the
control the display

comments

Support for Valine, Gitalk, and Livere

For details, see the topic configuration documentation and related comment plug-in documentation

Word count

Theme integration hexo-Wordcount plug-in, set in theme profile

wordcount:
  enable: true
Copy the code

Enabled (default enabled)

Photo gallery

The image gallery function is based on FslightBox, set in the theme profile

fslightbox:
  enable: true
Copy the code

Enabled (default enabled)

Label the plugin

Themes are integrated with tags for easy writing

note

Simply write the following in the Markdown file

{% note style %} ... markdown content {% endnote %}Copy the code

There are five styles to choose from: Primary, Success, Info, Warning, and Danger

For the record information

You can add your record information in the topic profile.

Footer: # -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - # # for record configuration please puts the thumbnail of the public security for the record ${yoursite} / img/beian. PNG RecordInfo: "" # 'a ICP number for XXX' govRecordInfo:" "# 'a male it for number XXX' govRecordUrl:" "# and address it for the record information # -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --Copy the code

Site hosting

Why Gitee Pages

GitHub and Gitee both offer free static web hosting services. We can use GitHub Pages or Gitee Pages to host static web Pages such as blogs and project websites, which saves money on server purchases and requires less maintenance.

GitHub Pages is widely used, and I’ve used it before, but access is erratic, which can slow down page loading. Gitee is the domestic version of GitHub, with excellent access speed and good domestic development momentum, so I choose Gitee Pages to host my website.

Establish warehouse

Apply for a Gitee account and create a new repository with the same name as the account to avoid any problems caused by the path.

Then open the Gitee Pages service in the services column of the warehouse home page.

Once opened, you will have a dedicated secondary domain address.

Note: The contents of the repository have changed and need to be manually triggered for the page to take effect.

Connect the warehouse

Install hexo deployer — git.

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

Modify the configuration.

deploy:
  type: git
  repo: [email protected]:java4u/java4u.git
Copy the code

Note that the repo address above is not the repository address, but the address that pops up when you download/clone the project. If type is git, select SSH.

Generate or add an SSH public key

Gitee and GitHub provide the Git service based on the SSH protocol. Before using the SSH protocol to access the repository, you need to configure the SSH public key of the account or repository.

Check if you have configured the username and email address:

git config --global user.name 
git config --global user.email
Copy the code

If not, do the following configuration:

Git config --global user.name '****'Copy the code

The SSH public key is generated locally and the email address is the newly configured account:

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

You can view the SSH public key:

cat ~/.ssh/id_rsa.pub
Copy the code

Copy the public key to Gitee paste and add.

Test whether the connection is successful:

ssh -T [email protected]
Copy the code

Upload the warehouse

Run the deployment command to upload local resources to the remote repository.

hexo d
Copy the code

Manual update

Remote repositories can see the submission record, but static sites do not perceive real-time changes and need to go to the Gitee Pages service page for updates.

Wait a moment and visit java4U.geitee. IO/to see Hexo’s static website with kaze themes.

Hexo+Kaze+Gitee Pages build static blog sites

preface

Hexo profile

What is Hexo?

Hexo installation

Lead requirements

Install Git

Installation Node. Js

Install Hexo

Run hexo

Hexo site

Initialization operation

The directory structure

Local boot

The core configuration

package.json

_config.yml

Web site

URL

directory

The article

Categories & Labels

Date/time format

paging

extension

Commonly used instructions

To create the article

Running server

Generating static files

The deployment of

Hexo theme

Why Kaze

Install Kaze

The topic configuration

Theme colors

Size and font

Site Access Statistics

The data analysis

Home page

The article first figure

The widget

about

Social link

Friends of the chain

The article page

The search function

directory

Code highlighting

A mathematical formula

copyright

Front-matter

banner_img

banner_img_set

excerpt

comments

Word count

Photo gallery

Label the plugin

note

For the record information

Site hosting

Why Gitee Pages

Establish warehouse

Connect the warehouse

Upload the warehouse

Manual update

Related Posts

Picture processing need not worry, give you ten small helper

How does the front end improve the user experience: increase the size of the clickable area

ReactNative develops a lightweight APP