After two days of torturing, I finally got my first blog set up. During this period, I stepped on many pits. Now I sum up to help you to build your blog more conveniently. First post results pick up the blog

Baidu referred to the final summary of various blog posts, hope you don’t mind

Because I use MAC computer for a long time, so this article only on the basis of the MAC system to achieve the function, use Windows system need to refer to their own, its principle is the same.

This is the first article I wrote, may see and many other articles have similarities, please automatically ignore (~ ▽ ~)~*, the full text pure hand dozen, aims to help you more convenient implementation of the construction process, we do not like spray oh ~

One, the introduction

1. The reason for setting up a blog

  • I have used evernote, Youdao Note and other tools to record articles, but there are always more or less problems when using them. It is not as intuitive as using blogs
  • You can publish as you like, change the look and function
  • Having a blog site of your own feels even better
  • I hope more people can see my article

2. Time spent on the whole process

  • At the beginning of Baidu referred to the various gods of the article, each article will have more or less defects, and he stepped on many pits to complete
  • It took about two days to complete the construction of the blog and the modification of the theme

3. Configure the environment

  • Sublime Editor for MAC (temporarily available)
  • Github account, Hexo framework configuration, Next theme (see below)

4. Construction mode

  • The site was built using the Hexo framework and then deployed to free Github

GitHub configuration

  1. Go to github.com/. If you don’t have an account, sign up and remember your username

  2. From the home page, click on your icon in the upper right corner and click Your Profile

  3. Click Repositories and create a new one

  4. The Repository name (fill in your name), http://yourname.github.io (yourname agree with your registered user name, this is your blog domain name), an error in the picture below because I have used this name, you fill in your name will not encounter this problem, Then click Create Repository to proceed to the next step

  5. Click on your repository and go to Settings

  6. Drop down to GitHub Pages, where the red box above is your blog address, the red box below can go to select your theme style, at this time GitHub basic configuration is complete

    Choose a theme from github, and then return to github. (Note: The item to the left of the Save button must be displayed as Master Branch.)

Three, environment configuration

  1. Install Node.js. Enter the terminal after the installation is complete

    node -v

    npm -v

    Check the version number. If yes, the configuration is successful

  2. The MAC system has its own Git environment. Windows users need to download Git

  3. After the installation is complete, through the git command to see whether or not his user name and email and consistent in my own making, such as inconsistent please make your own changes, such as query to multiple user name must delete useless user name, such as query without any reaction after suggests that haven’t configure the user name, use the following change or add user name command, Git config, git config, git config, git config, git config

    Git config –global user.name

    Git config –global user.email

    Git config –global –unset user.name Specifies the user name to be deleted

    Git config -global -add user.name Specifies the new user name

    Git config –global user.name Specifies the user name

    Git config –global user.email

  4. Enter NPM install -g hexo-cli(sudo NPM install -g hexo-cli, and enter computer password Enter)

  5. This process can take a long time, and WARN errors can be ignored if they occur. I remember at that time, every time there was a dependency package that was not updated, it didn’t matter. After the execution is complete, use hexo -V to check whether the installation is successful, as shown in the following figure

Four, website code and Settings

  1. Create a folder on your desktop with a custom name such as hexo, and enter the hexo folder with the terminal CD

  2. Type hexo init blog (ignore warn error)

    • _config.yml, the configuration information of the website, where you can configure most of the parameters
    • The source folder is where user resources are stored. Files/folders with initial names (underlined) and hidden files are ignored except for the posts folder. Markdown and HTML files are parsed and placed in the public folder, while other files are copied over
    • Themes, theme folder. Hexo generates static pages based on themes.

  3. Start Blogging with Hexo is installed successfully

  4. There’s an article in the folder called “Hello World”

  5. CD Go to the blog directory

  6. Type hexo g to save the static file

  7. Type hexo s to start the server. By default, the url is http://localhost:4000/. The service is enabled. If you need to disable it, Ctrl+ C

    Note: hexo s command to open a local service, after open, you can use the above address access, such as closed, the above address can’t access, this function is used to check whether the modified configuration is successful, such as open check and found no problem can then be deployed to the server, then use your blog address access to see the latest set of results.

    If the blog may not change immediately after uploading to the server, try refreshing it several times or reopen the browser

  8. Open a new terminal, enter: ssh-keygen -t rsa -c “Github registered email address”

    Your public key has been saved in /Users/ ZJJK /.ssh/id_rsa.pub.

    Go to the file (in is the address of the file), open it (use Sublime Text or another editor),Ctrl + A copy everything inside, and go to Sign in to GitHub: github.com/settings/ss…

    Step by step: New SSH key — Title: blog — key: Enter the copy — Add SSH key

    Note: This process generates an SSH key. If you run this command again, you need to configure the new SSH key to Github, because the new SSH key will overwrite the original SSH key. If you do not replace the SSH key in Github, the subsequent uploading of the Git server will fail

Five, the blog site configuration information

  1. Go to the blog folder and use sublime to open the _config.yml file, which is the configuration information for the blog, and modify the parameters here. (Note that each argument must be followed by a space.)

  2. Base your Settings on your own information

    Title: The blog of Memory

    Subtitle: Xiaobai's road to technological growth

    Description: Xiaobai's path to technological growth

    Author: yi

    language: zh-CN

    timezone: Asia/Shanghai

  3. In the _config.yml file, locate the deploy configuration and replace username with your own username. The repository address will be the address of the project you created on Github. You can copy it from Github

     deploy: 

 	type: git

 	repository: [email protected]:username/username.github.io.git

 	branch: master
Copy the code

    Saved.

  4. The configuration information of various themes should be configured on _config.yml in the theme folder! The next theme will be used as an example, which can be ignored here.

Publish articles

  1. Terminal CD go into the blog folder and type hexo new “Hello blog”(Hello blog is your post name, customizable)

  2. Go to source/_posts/Hello blog.md and open the file (you can also find the file in source/_posts/Hello blog.md).

  3. The content of the article is edited using Markdown syntax, and relevant software is required to open this file. The software I use is MacDown Version, and you can download your favorite tools according to your own habits (attached: Markdown syntax instruction).

  4. Open file editing

     ---
 title: Hello blog

 date: 

 ---
Copy the code

    Only enter the title field, other fields can be added according to the topic (note: the title should be followed by a space)

  5. Open the terminal and perform the following steps:

    CD Go to the blog folder $hexo Clean INFO Deleted database. INFO Deleted public Folder. $hexo generate INFO Start processing INFO Files loaded in 1.48s... INFO 29 Files generated in 4.27 s $hexo server INFO Start processing INFO hexo is running at http://localhost:4000/. Press Ctrl+C to stop.Copy the code

    After the local configuration is complete, open the local configuration to check whether the newly modified configuration is successfully modified. You can also run the hexo clean hexo g hexo s command

  6. Open http://localhost:4000/ and check if there is no problem, you can deploy it to the server

      $ hexo deploy
 INFO  Deploying: git
Copy the code

    Error deployer not found:git error occurs, type the following code

    NPM install hexo-deployer-git –save(sudo NPM install hexo-deployer-git –save, PC password enter)

    Execute hexo deploy again

    The Github login interface may appear, and you just need to fill it in normally (I have been logged in to Github and haven’t encountered it yet).

    Github. IO to access your blog (username = github username)

Seven, theme setting

One of the most fun things about theme Settings is experimenting with different themes. As I like the style of the next theme, I will take the next theme as an example to go through the process of publishing articles and configuring various kinds of blog information. Here are some other themes, you can choose the theme download configuration according to your favorite style. The general theme configuration will be explained in its corresponding Github

The official Hexo Theme Collection, which has many themes to try out.

Here are a few recommended themes:

  • Git Git Git Git Git Git Git
  • Material official website, Git

    1. To configure a theme, start by downloading the theme to the appropriate Git link

    2. After downloading, unzip the file and place it in the Themes folder of your blog

    3. Change the name of the theme folder to Next (the name is the name of your theme, customizable, not mandatory, next as an example). Then open the configuration file (/blog/_config.yml), find the theme field, change its value to next(the name you just customized, note the space after the theme), save and close

    4. Next, open the documentation in the blog corresponding to the theme and compare _config.yml (/blog/themes/next/_config.yml) in the “Theme” to set the relevant functions for you

    5. The images in the Settings will be placed in the theme folder (/next/) \source\img. In the Settings, use a format similar to “/img/xigua. PNG” to set the image.

    6. Remember when setting: add a space after. This pit is a bit annoying

    7. And then I’m going to do it again,hexo Clean,hexo G,hexo S,hexo deploy

Eight, summary

  • It took two days to complete the construction of the blog and one day to write this article. The full text is played by hand. It is really tired to write here

  • Looking at other people’s articles all the way to build down the middle or will encounter a lot of problems, so a variety of Baidu to solve, so in this post this article, I have encountered pits here are clear to solve, we are the same, may encounter a variety of different problems, Baidu to solve a good (all-powerful Baidu ah ~~~)

  • I wrote the article with Markdown’s syntax, and I felt ok

  • Pick up the blog

  • More articles will be written in the future, please subscribe