You can see the end result here

background

As a developer, I can’t live without a blog. Recently, I spent a few days to build this blog and deal with a lot of details. In this article, I will sort out my optimization from the beginning to the present and the follow-up, so as to help more people build, maintain, update and own blogs.

At first all of my blog on sina weibo, because twitter is more likely to promote their own articles, weibo users is large, but later showed the disadvantages of weibo slowly, after all, not the developers of the heavens and the earth, my blog often insert a lot of code, and weibo editor does not support markdown, ordinary block of code editor compatibility is very poor, Not to mention highlighting, sometimes the layout is messy and ends up looking pretty, like this:

And weibo account system also has some disadvantages, so later turned to brief book, Gold and other technical platforms, have to admit that compared to Weibo these platforms are much more friendly to developers, but later found a problem. This is because I am using the native MarkDown editor for this article, and these platforms are not rigorous or uniform about the small details of markDown syntax:

The editors for the two platforms are not uniform, so each article needs to be modified differently for each platform.

To sum up, the simplest and most once and for all the way is to set up his own blog platform, and HEXO good help us to solve the problem, it is easier for a developer, the entire process for most developers with code base morning time, you could just but the hardest and most headaches is the detail of adjustment, UI modifications, optimizations, etc., but this article will cover each of them.

Environment configuration

  • Node.js

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

After the installation, restart the terminal and run the following command to install Node.js.

$ nvm install stable

  • Git

Most developers don’t have this, but I got it when I installed Xcode,

Homebrew, MacPorts: brew install git; Or download the installer to install

  • Bitbucket account

It’s common to use HEXO+GitHub Page to create your own blog, but the problem is that GitHub is open source, so anyone can see your source code on it, which doesn’t have a huge impact, but it feels weird to me. So I use Bitbucket Page for my blog, everything is the same except it’s a private library (free for five people)

Began to build the

Step 1: Create the repository

Go to github/bitbucket and create a new repo. Make sure that the repo Name meets your Account Name/github. If it’s bitbucket, it’s your Account Name/bitbucket. IO, because only this repository Name will end up in a static page. As shown in the picture, the contents of XXX must be consistent with the text in the red box.

Step 2: Create a local folder

After creating the folder, CD it to the folder you created and execute the initialization commands for hexo

$ hexo init
$ npm install
Copy the code

Once you’re done, you’ll have your contents in your folder. The standard directory structure looks like this (just list the necessary folders and their subdirectories).

├ ─ ─ _config. Yml ├ ─ ─ package. The json ├ ─ ─ scaffolds ├ ─ ─source| ├ ─ ─ _drafts | └ ─ ─ _posts └ ─ ─ themesCopy the code

  • _config.yml: Where most of our future operations will be done in _config.yml, which is the configuration file for our site.

  • Scaffolds: The template file that defines what we initially look like when we create an article,

  • Source: can be temporarily understood as our article store

  • Themes: themes file

Step 3: Deploy to Git

Modify the following fields in our site configuration file _config.yml

  • The type value corresponds to the type of server you are deploying.

  • Repo is the address of your repository, which is the address of the repository clone. HTTPS links are recommended.

  • If you don’t write branch, the default is master, but usually we’ll just write master.

Save the configuration and go back to your terminal and run NPM install hexo-deployer-git –save to install a plug-in so that you can deploy your articles to the Github server and let others view them. After the installation is complete, execute the following code on the terminal in sequence (for simplicity, the following three steps are collectively referred to).

  • Hexo Clean Clears the cache

  • Hexo generate for rendering – Hexo g

  • Hexo Server deployed to local (for debugging) is shorthand for hexo s. Then the browser can enter http://localhost:4000 to see the effect of your blog, but this is for local debugging, other people can not see. (After debugging, remember to control + C to close the local port, otherwise the next time will not be able to enter)

  • Deploy to the Git server using hexo Deploy – hexo D – after debugging.

After that, open your browser and type in http://github name. Github. So far the third step has been completed, and the final result is as follows:

Step 4: Write an essay

To create a new post, use the following command: hexo new Post “post name”. The post is set up in source/_posts, and you can edit the content using markdown syntax. After the editing is complete, perform the operation of the terminal in the third step, and refresh the browser to see your new article. The diagram below:

personalized

A: the theme

To obtain

Theme is the basis and premise of our personalized, we want to do any personalized modification is basically in our theme modification, first to find a satisfactory theme is the first task. There’s a lot more on the web about themes, and the official HEXO Theme directory contains a number of themes from developers around the world. Alternatively, developers can search the Web for the HEXO Theme keyword to get a theme.

The installation

Themes are usually repo, just clone them to the blog directory under themes/XXXX, XXXX will correspond to the name of your theme, like this: Themes/a – rsnippet git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git so we can ensure each time we can pull the theme author has updated the updates. There is a problem with this, which I’ll discuss later in the HEXO multi-terminal Synchronization section, so we chose to install the theme directly by downloading the repo and decompressing it into the Themes. In fact, for the stable theme authors generally do not frequently update, unstable theme we do not use, so the latter installation is the same.

Then we go back to the site configuration file _config.yml and change the following field to the name of your theme folder: next,

Then save, then go to the terminal to perform the three steps, and then refresh the page to see the new interface. Here’s what happens when I refresh with the NEXT theme. Because this idea is so well developed, we will use this topic as an example in the future

Two: theme menu

Add a button

The theme menu is also a theme button. These are the two at the top. The default next topics are Home, Archive, tag, about, category, etc. We need to modify the configuration file of the theme. First, we need to find the _config.yml file under the theme folder. Yes, it has the same name as the previous site configuration file, but they have a different path. The theme profile is an element that configures some topics. Find the Menu field in the theme configuration file

You can see that the topic author commented out some of the buttons, but only the two basic ones. Note that the Key is not the name of the button, because the topic supports multiple languages, so the Key is just an identifier. The specific button name should be found in this path

Each file corresponds to a different language. Taking Chinese as an example, we go into zh-hans. yml to modify these fields

Key is the key we used in the theme configuration file, and value is the name of the button in simplified Chinese. After that we save the three steps and see our new button.

Add a page

After adding the button we need to click the button to display a unified page. At this point we need to add pages. In the case of a tag page, the command in hexo to add a page is hexo new page XXXXX, followed by XXX is the name of the page to add. Tags are used here. To test the new tag page we add a tag to the previous page. Go to source/_post to find an article and add the following field at the beginning, multiple tags and so on

Then edit the tag page we just generated (source/tags/index.md) to specify its type as tags

Then save and execute those three steps to have the following effect

Click the corresponding tag to jump to the corresponding article. The same is true for other pages.

Three: Add read more button

When we are on the home page, it is actually our list of articles, but there is a problem at this time, if one or several of our articles are very long, is the home page longer? In fact, on the home page, we can only show part of the article, and click the “Read More” button to enter the details of the article. This is the time to truncate the article. We use
to truncate, using the default text

Then execute those three steps and this is what happens

Click to read more.

Four: change the theme background

Styl is empty. This file is reserved for the next theme to make some custom CSS styles. Let’s add the following code.

@media screen and (min-width:1200px) {body {background-image:url(/images/bg.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position:50% 50%; background-size: cover }#footer a {
        color:#eee;}}Copy the code

Here you can see that the image path in parentheses is our background image. Just put the image in themes\next\source\images and remember to write the name right and end it. Similarly inside the parentheses we can directly put a picture of the finish these operations to save link such as https://tpc.googlesyndication.com/simgad/6893153702744595670, and then execute the three steps can see effect, but may be the browser cache, You can clear the cache and refresh it.

Five: modify the blog background transparency

Since the background image was modified in the previous step, it does not look good if it is blocked by the white of NExt itself, we can try to make the white background of NExt itself transparent, which will be more beautiful. Again, modify the themes\next\source\css_custom\custom.styl file to add the following code based on the previous step

// Change the background color and opacity. Main-inner {background:#fff;Opacity: 0.9; }Copy the code

The first attribute is the color value and the second attribute is our transparency. Properly modify, otherwise it will backfire and you can’t even see the word. The last two steps are the result of my blog.

Six: Change the author’s head to a circle,

Our default is a square image. If you want to change it to a circle, add the following code to the same path as in the previous two steps

.site-author-image {
  border-radius: 100%;
  padding: 2px;
  border: 2px dashed #fff;Animation: Cycle 2s 0.5s forward; transition: border-radius 2s; }Copy the code

Save -> 3 steps to see the effect

Add background animation

Background animation uses Js to deal with, the students who can write their own favorite animation, I will use the online more general animation. Go to the following path themes\next\layout\_layout.swig and add the following code above the article 

<script type="text/javascript"
color="255255255" opacity='1' zIndex="- 2" count="100" src="/ / cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

Copy the code

Then save -> 3 steps to see the effect where SRC is JS path, interested can customize the effect.

Add a comment page

HEXO’s comment page officially recommends Disqus, but it has been blocked, and even if you have a way to overcome it at development time, there is no guarantee that everyone who reads your blog will. So we plan to use some other third parties to achieve, first of all, let’s make a comparison of several products on the market:

Comparison:
  • disqus

The only drawback is that it cannot be used in China. Don’t take a

  • Say more domestic well-known comment system, has been closed service temporarily not considered.

  • Gitment is a comment system based on the Github issue. It looks like Github, but it’s not very stable yet, and the interface is not customizable. And comments require a Github account

  • Livere, whose Chinese name is Bili, is a South Korean comment system, which is good for checking sticks without any national emotion. It is also the one I use now, and I mainly use it for several reasons

    • Support for comment import in various formats. You can easily import comment data from other platforms. Support for various JSON formats.

    • The introduction UI provides a variety of topics.

    • Foreign things are not subject to domestic restrictions.

Integration:

Go to livere’s website and register m, I won’t go into the details, just install her step by step, and then he’ll give you an install code that looks like this:

The main piece of information is the data-UID. The NEXT topic itself has livere reviews integrated, but they are commented out. Find the topic configuration file _config.yml find the following code

Open the comment and fill in the UID that livere gave you when you registered with it. Then save -> 3 steps.

Multi-terminal operation

background

HEXO is known to be a static blog, where all the pages are rendered statically from local files and then deployed. This creates a multi-terminal deployment problem, where you have a company computer configured, you want to go home and write, and there’s nothing at home and you have to reconfigure the environment, but that’s secondary. The key is that if you don’t ensure that the contents of the two terminals are exactly the same, the data on the server will be overwritten by the last deployment, and the previous ones will be overwritten.

To solve

As you can see, the overall workflow of HEXO is the Git workflow. Whether you’re using Github or Bitbucket, you follow GitFlow, which is a multi-terminal, multi-person collaborative solution. So we can use it to solve the problem of multi-terminal synchronization.

process

Let’s take a look at the overall flow of Hexo. Our normal folder structure is shown in the figure:

Step 1: Hexo G

The source folder holds our posts, tags, archives, and so on, which is the content of our blog. When we execute hexo g on the terminal, the file in the source will be rendered as a static page file and put into public according to certain rules:

Step 2: Hexo d

Then we perform the hexo d step which for the time being we can think of as pushing the files in public to our Git repository. So in our repository, xxxxxx.bitbucket. IO, the only files you see are the files in public.

Additional: Hexo Clean

This step has nothing to do with GitFlow, but since we’re talking about the process, I said this step is used to clear the cache, but what it does is it deletes the whole public file before the first step, and then we execute hexo g to re-render into public, Then we deploy with hexo d, so that we don’t have the impact of the previous content.

Specific operation

From the previous step, we know that it is not enough to have only public files on git server, we need to have all files in our entire blog folder to perform multi-terminal operation. So here are two methods:

  • Create another repository we temporarily named MyProject, upload all our files to this Git repository, when we change to another computer we directly pull the code of this new repository and then go to “write” -> three steps. Finally, after all files are pushed to MyProject, all Git operations will be carried out in this repository.

  • We can do xxxx.github. IO and create a new branch named hexo. This branch will do exactly the same thing as MyProject and its files, but we won’t have to create another branch. All git operations will go to this branch, and local files will always be in this branch. However, even if you do all git operations in hexo, you must ensure that the master branch is the default branch, otherwise you won’t be able to open your blog.

Both of these are basic Git operations and will not be covered in this article. But one thing I want to emphasize here, remember I told you at the beginning of the topic that I recommend you go to the repo where the topic is and download the zip and then unzip it and drag it into the blog directory? If you do not drag it in but clone it, you will involve git’s add submodule operation at this stage. In fact, the operation is not difficult, the specific command is also a lot of Internet. However, if you use bitbucket as I do, you may find that submodule operations are not possible. I don’t know if this is a bitbucket BUG or something else. The same command works fine when hosting a github blog, but not for bitbucket. When you perform git submodule init with a pull from another computer, it will prompt you that it cannot be found. It hasn’t been solved yet. If any of you have any way to contact me in time.

Binding personal domain name

Note: Bitbucket has disabled the ability to customize domain names for your personal blogs since 2015. This means that you will not be able to use your own domain if you deploy your blog in Bitbucket following the above steps, as the Bitbucket documentation clearly explains

The preparatory work

Create a repository on Github with the name username. Github. Then change the site configuration file to the deployment address (the repo field) and change the original bitbucket repository address to the Github address

In three steps, your blog will be migrated from Bitbucket to Github. In this way, your entire blog repository will remain in bitbucket’s private repository, but the public files in the public folder will have been deployed to Github’s repository. The confidential information remains confidential and does not affect your binding to your own domain name, killing two birds with one stone. If you follow the steps above, your blog address will be xxx.github. IO.

The domain name to buy

There are many channels, I will not repeat one by one, MY side to Ali Cloud ten thousand network domain name purchase as an example, to find the right domain name

Domain name resolution

After purchasing the domain name and following his steps for real-name authentication, we need to resolve the domain name to our blog, and find the corresponding resolution button on the right of the domain name in the Ali Cloud console. Click and add parse

Then add the parsing as follows, remembering to replace the record value with your own blog address

Remember to enable this record later, but if you are like me, you do not need to enable it if you are purchased and configured by Ali Cloud, it will be enabled for you by default.

Warehouse configuration

Then go back to your Github repository, go to your repository Settings page, find the following field, add your domain name in the red box, and save

Blog configuration

Go back to your blog directory and create a file with no suffix in the source directory. Name it CNAME and fill it with your domain name. I did this, just your domain name and nothing else. After three steps, you can access your blog through your domain name. If you can’t access it, it may be because of the carrier’s DNS cache problem. Just wait a few minutes.

Implementing HTTPS protocol

According to after completion of the above steps can be accessed through the domain name, but the question is if you use Google browser or Safari, he will prompt you to not be trusted site, only you click to continue will display your blog, and in the address bar or a red x, although does not affect the use and reading, but still feel uncomfortable, This time we’ll talk about how to change your blog protocol to Https. Here are a few ways:

  • Certificate of purchase

  • Use a free CA certificate. Tengyun Ali cloud are provided. But there is a time limit

  • The CDN is used for reverse proxy

If you use the CDN to configure the reverse proxy, you can use the CDN to configure the reverse proxy. If you use the CDN to configure the reverse proxy, you can use the CDN to configure the reverse proxy. If you use the CDN to configure the reverse proxy, you can use the CDN to configure the reverse proxy. Cloudflare, a foreign CDN service provider, is needed here:

The principle of

Cloudflare offers DNS resolution, and it’s fast: what takes half an hour on AliYun takes place in an instant, and it offers free HTTPS (without applying an SSL certificate). The implementation mode is that the connection between the user and the CDN server is HTTPS, while the connection between the CDN server and the GithubPage server is HTTP, and the reverse proxy is added to the CDN server.

The little lock that the user sees is actually the user’s certificate to connect to Cloudflare, and there is no HTTPS from Cloudflare to Github, but that’s enough for our static blogs.

configuration

The first step:

Again, go to the official website to register, and then add your domain name, be sure to add the domain name you bought.

The second step:

Go to the DNS resolution screen and fill in the following resolution, because we use Clouldflare for DNS resolution so later we need to delete the resolution at the place where we bought the domain name.

The first two records point to your Github server address, which is given in the Github documentation, and the last CNAME record points to your Github repository domain name, username. Github. Make sure you follow this to the letter.

Step 3:

Make a note of the DNS resolution server cloudFlare gave you, below the page in the previous step, and use this record to replace the DNS resolution server where you bought your domain name (mine is Aliyun), and delete the DNS resolution record in Aliyun, because we will rely on ClouleFlare to resolve DNS.

Step 4:

Go back to ClouldFlare and select the Crypto option and then select Full or Flexible below

The differences between the options are shown below

The last one requires certificate support. Then scroll down to turn on the Always Use HTTPS switch

Step 5:

That’s all you need to do, but if someone enters http://XXXXX in the address bar to get to your blog you’ll still get a non-HTTPS effect, so we’ll make a mandatory jump.

That’s safe.

Pit:

After following the above steps, I found that although the home page is HTTPS and does not show a Red Cross, it does not show a small green lock, but an exclamation point. However, some blog pages can normally show an HTTPS green lock. Later, it was found that there were non-HTTPS links in the current page, such as the photo bed is not HTTPS, or the comment plug-in does not support HTTPS. However, the comments I used in my blog are supported by HTTPS, but my photo bed at that time was all HTTP, so it only showed the exclamation point. Later, I changed all the photo beds to HTTPS.

The last

Only a small part of the whole article in the beginning of how to build a blog, the following are basically to give you how to optimize, adjust some details such as UI, user experience and so on, of course, we can do far more than these, if there is any question welcome to discuss with me. I will read the comments below. In addition, this article will be updated as I have new ideas about HEXO or how to play it. I hope you can keep an eye on my site. Thanks.