The original post address: maoyikun. Gitee. IO / 2020/03/06 /…

Writing in the front

There were two reasons for wanting to start a blog in the first place:

  1. I want to digest and output what I have learned. I have a more systematic management.
  2. I just want to do something about it.

Some people may ask why there are so many blogging platforms do not need to build their own? In fact, I feel like I have a sense of accomplishment, and I can control it, and it is completely free to make a website of my own, why not 🤘

As for why Hexo was selected, Hexo😂 is the most popular way for Google to build free personal blogs. Why choose GiteePages over GitHubPages, naturally because Gitee is a domestic code hosting platform, at least it will not be wall dropped 😂, and the access speed is also a bit faster in my opinion.

What are Hexo and GiteePages

Hexo

To put it simply, Hexo is a fast, concise, and efficient blogging framework.

Hexo website

GiteePages

GiteePages is a free static page hosting service from Code Cloud similar to GitHub Pages. GiteePages currently supports static resources compiled by Jekyll, Hugo, and Hexo.

GiteePages document

To make things

Steps to do things:

  1. Install nodejs
  2. Install Git
  3. Install Hexo
  4. Initialize the Hexo blog (personal website) folder
  5. Register for a Gitee account
  6. Create the Gitee repository
  7. Preparation of documents before submission to Gitee warehouse
  8. Push resource files to the Gitee repository
  9. Start the GiteePages service

1. Install nodejs

Since Hexo is based on NodeJS, to use Hexo, the first step must be to install NodeJS. Installation is divided into the following steps:

  1. Download nodejs

  2. Install nodeJS on MAC and Windows. On Linux, you can install nodeJS directly from the repository or download the binary package (ps: The installation commands vary with Linux distributions, which will not be described here). After the installation is complete, you can enter node -v and NPM -v on the terminal to check whether the installation is successful. If the versions of the two commands are displayed, the installation is successful.

  3. After the installation is complete, the nodeJS repository is a foreign repository, so it is very slow to download modules (of course, if you have been to the wall ladder, forget me), then you need to add a domestic repository. Execute on terminal:

npm config set registry https://registry.npm.taobao.org
Copy the code

2. Install Git

Git installation is required to push local files to a remote Gitee repository. Installation is divided into the following steps:

  1. Download Git

  2. For Linux, you can install nodeJS directly from the repository by using commands (ps: Linux distributions have different installation commands, which are not described here). After the installation is complete, type git –version on the terminal. If the version number is output, the installation is successful.

3. Install Hexo

Nodejs is ready, so it’s time to introduce Hexo, the first protagonist.

Execute command:

npm install hexo-cli -g
Copy the code

If an error occurs when executing the command:

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/hexo-cli npm WARN checkPermissions Missing  write access to /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib/node_modules/hexo-cli npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/hexo-cli' npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/node_modules/hexo-cli'] { npm ERR! stack: "Error: EACCES: permission denied, access '/usr/local/lib/node_modules/hexo-cli'", npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'access', npm ERR! path: '/usr/local/lib/node_modules/hexo-cli' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.Copy the code

During the installation, files need to be written to the system folder, but the account running the command does not have the permission to write to the system folder.

In this case, you need to use root to execute the command:

sudo npm install hexo-cli -g
Copy the code

After the installation command is executed, run the hexo -v command on the terminal. If hexo information is displayed, the hexo is successfully installed.

Congratulations, from the success of a step 👏

4. Initialize the Hexo blog (personal website) folder

Now that Hexo is installed, all we need to do is use Hexo to initialize a folder where we can store our blog or personal website resources.

Find a place on your computer’s hard drive that feels good and run the following command:

Hexo init blog // Blog is a directory to create, you can define it yourselfCopy the code

Unsurprisingly, your folder is now created.

Use the terminal to access the created folder.

Run the following command to update the nodejs module:

npm install
Copy the code

Ok, now you can do things in this created folder 🤘.

Try executing commands in this directory:

hexo server
Copy the code

You should see the following output:

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
Copy the code

The Hexo service has been successfully launched, and you can access it in your browser to see your blog (personal website) home page

Something like that

We’ve seen the page, but all the configuration is default, and we still need to make some changes. Under that folder, find the _config.yml file, which is the configuration file for Hexo and looks something like this:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Name of your blog (personal website)
subtitle: Subname of your blog (personal website)
description: 'Description of your blog (personal website)'
keywords: Keywords for your blog (personal website)
author: The author of your blog (personal website)
language: Your blog (personal website) language En: English Zh-cn: simplified Chinese
timezone: 'Time zone (optional)'

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: The url of your blog (personal website)
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ' '
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ' '
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ' '
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ' '
Copy the code

Here you can configure the information of your blog (personal website), the rest of the configuration can be configured according to their own needs.

Saw the home page is not a little little excited, here, you have succeeded half 👍

Strike while the iron is hot.

5. Register a Gitee account

Now nodeJS is available, Git is also installed, since we are using GiteePages to build blogs, then of course we need a Gitee account, registration account needless to say it. Click to register for Gitee

6. Create a Gitee repository

Ok, after the above steps, you are ready to run your own blog (personal website) locally.

If you want others to be able to access your blog (personal website), then you need our second protagonist, GiteePages, to be able to use GiteePages, you need a Gitee repository.

Now log in to the Gitee home page you signed up for, and there’s a + icon on the top bar

Mouse up, click new warehouse to enter the warehouse creation page

If you want to access your blog (personal website) directly from your domain name, you need to create your repository with the same username you used to sign up for Gitee.

For example: my Gitee user name is Maoyikun, THE name of the repository I created is Maoyikun, then I can access directly using Maoyikun.giitee. IO. However, if I create a repository with a different name than the user name, such as blog when I create the repository, then I must use the domain name + the repository name to access the repository, such as Maoyikun.gizee.io.

Open source or not, if you don’t want your stuff to be seen, go private.

Whatever else you choose is fine.

In this way, the repository for our blog (personal website) resources is created.

7. Preparation before submitting documents to Gitee warehouse

Before pushing local files to the Gitee repository, we need to do some simple configuration.

Enter the command on the terminal to configure the user name and email for Git submission:

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

If you want to submit without entering a username and password each time, you need to generate an SSH key locally.

Enter:

Ssh-keygen -t rsa -c "Public key Description"Copy the code

The generated secret key is stored in the ~/.ssh/ directory.

Next type in terminal:

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

You can see the contents of the generated public key. Copy the contents of the public key into Gitee.

Go to your Gitee home page and click Settings

Go to the Gitee Settings page and find the security Settings -SSH Public key

The page for adding a public key is displayed

Paste the public key content you just copied into the public key input box and click OK to save the public key.

After the above operations are complete, you can test whether the public key is configured successfully.

Enter:

ssh -T [email protected]
Copy the code

Execute the command if it outputs:

Hi your Gitee account! You've successfully authenticated, but GITEE.COM does not provide shell access.Copy the code

Verify that your public key has been configured successfully.

The next thing to do is push the local files to the Gitee repository.

8. Push resource files to the Gitee repository

The local blog (personal website) directory has been generated, the Gitee repository has been created, and now we need to push the local files to the Gitee repository.

Since GiteePages are compiled with Hexo resources, there are two options for files that need to be pushed to the Gitee repository.

  1. Push only static files generated by Hexo to the Gitee repository

This way, all static files generated by Hexo are pushed directly to the Gitee repository, which is equivalent to GiteePages hosting all the generated static files from your blog (personal website), without the need for GiteePages to compile and generate a static file again. This will make each update of GiteePages relatively short. Another advantage of this approach is that it is easier to push files to the Gitee repository directly through the Hexo command.

Using the terminal, go to the blog (personal website) folder and execute the command to install a plug-in:

npm i hexo-deployer-git
Copy the code

After installing the plugin, go to the _config.yml file in this directory and open it to configure your repository information:

Locate the deploy node in the file and modify or add the configuration
deploy:
  type: git
  repo: Your warehouse address
  branch: The branch you want to push to the repository (master by default)
Copy the code

Execute in this directory:

hexo g
Copy the code

This command will generate a static file based on your Markdown file. Once this is done, you can start the Hexo service locally to see the effect. Type the following command:

Hexo s // Same as the hexo server commandCopy the code

Once you feel satisfied, you can commit to the Gitee repository and execute the following command:

hexo d
Copy the code

At this point, the generated static file is pushed to the Gitee repository.

  1. Push the entire previously initialized folder to the Gitee repository

GiteePages automatically compiles your directory once and generates all the static files. This way, each update to GiteePages will take a little longer.

After the terminal enters the previously initialized blog (personal website) folder, run the following command:

Git add. // Add all the files to git temporary. Git commit -m "This commit" // Commit the files to your local git remote add Origin Git push -u origin master // Commit your local files to the master branch of Gitee repositoryCopy the code

At this point, all the files for your blog (personal website) have been submitted to the Gitee repository.

Ps: The Gitee warehouse address needs to enter the home page of the warehouse you created to see, since the public key is configured, then the warehouse address must be the best using SSH protocol.

Now it’s all about opening GiteePages.

9. Start the GiteePages service

Finally came the last step.

Now go to your Gitee repository page, find the service, and click On GiteePages to open GiteePages

After entering the page, you can select the branch that the GiteePages service needs to host. It is recommended that you select force HTTPS and click Start to start the GiteePages service.

After launching, you will be shown your GiteePages url, which will be the address of your blog (personal website). Keep that in mind.

In the future, if your blog (personal website) changes, just click on the GiteePages service page to update.

At this point, your blog (personal website) is all set up.

Hexo writing

Once your blog (personal website) is set up, you can use Hexo to start enriching your blog (personal website).

How to write with Hexo, see the Hexo documentation

Write in the back

This article only introduces how to use Hexo and GiteePages to build a free blog (personal website). As for the more use of Hexo, it is not explained here. You can check out the specific use of Hexo on the official website and search for more Hexo applicable operations online.

If you have any mistakes or comments or suggestions, please point them out in the comments below at 🙏