Writing blog also has a period of time, gradually formed their own habits and tools stack, today to share, for the need of friends reference reference. All roads lead to Rome. Find what’s right for you and stick to it!

First of all, it should be noted that the blog built by the following scheme is completely controlled by itself, from the style of the page, to writing articles, to publishing and promotion, which may be tedious and repetitive work, but it has gained great freedom, after all, sending articles is not a very high-frequency operation. The purpose of this article is to introduce the main problems encountered in the process of building a blog and the solutions, so I will not go through every step in detail, you can Google the details.

Part one – Setup

1. Static site generator

We use markdown syntax when we write articles, and MD allows us to focus on the content itself without having to worry about anything else. The static site Generator is responsible for turning our MD-formatted articles into static files in a fixed format that can be viewed on a simple Web server. Jekyll is one such generator. It is implemented in Ruby, so it requires a Ruby environment. There are many similar tools, but it was chosen because it is officially supported by Github, and our blog will eventually need to be deployed to Github Pages.

Of course, there are many tools, such as hexo.

2. Template selection

If you’re developing a static site, what do you need to do? I believe experienced friends can easily say, such as the need to design a page, write CSS, paging, write JS to achieve some dynamic effects and so on. Are you kidding me? All I do is write articles? So, here comes the template. Jekyll templates, choose a template of your choice, and go!

3, making Pages

Assuming we have downloaded the template and generated static files using Jekyll, where do we access our files? If you don’t have a web server and don’t want to pay for one, use Github Pages. GitHub Pages generates a domain name like bugvanisher. GitHub. IO by default, bugvanisher is my GitHub account.

4. Domain name application

We may not be satisfied with bugvanisher. Github. IO. We can buy a domain name in Ali cloud or Tencent cloud, the price is not expensive, two years also dozens of dollars, here I take Ali cloud as an example.

After the domain name takes effect, add a CNAME to bugvanisher.github. IO as follows:

Then add the CNAME file bugvanisher.cn to the github root directory. There are many introductions on the Internet, so I won’t repeat them here.

Static resource acceleration

JsDelivr caches static resources such as JS, CSS, images into the CDN, thus speeding up page loading. This needs to work with the template to unify the reference of static resources from web sites to jsDelivr.

Part two — Write

1. MarkDown editor

There are plenty of mD-enabled editors out there, and I like Typora because what you write is what you see. In addition, it can also work with the image upload tool, if you need to insert a local image when writing an article, just copy and paste, and then right-click upload, you can upload to the specified map bed, and return the URL address.

Something like this:

! [image-20210402174455137](https://cdn.jsdelivr.net/gh/bugVanisher/images/static/image-20210402174455137.png)Copy the code

This really eliminates a lot of uploading work.

2. Upload pictures

As mentioned above, PicGo is actually used to upload pictures in the editor. We set PicGo as the photo uploading tool in Typora, as follows:

Set up PicGo to upload images to Github’s map bed (create a public repository for the map bed yourself). When we upload images in the editor, we actually upload images to our map bed repository. With jsDelivr, access to image resources is also accelerated.

3. Classification of article sources

This function is realized by myself, please refer to it if necessary. At present, I divide my blog articles into three categories, namely original, reprint, translation and template matching. I just need to add the following in the head of the MD file corresponding to my blog articles:

type: reproduce
or
type: translate
Copy the code

The result is as follows:

In addition, the template I choose has the function of top article, implementation and use is similar.

The third part — promotion

1, Google included

Write the article of course want to share, let more people see, so we need to do SEO, do Search engine included, want to let Google included based on Github Pages blog is very simple, in Google Search Console submit their own URL can be. Jekyll templates usually integrate sitemap generation plugins, so we submit the Sitemap address to Google.

Here is my website listed in Google:

2, Baidu included

Github Pages rejects baidu search engine crawlers, so if you want baidu to include them, you can only deploy a mirror blog. You can refer to the scheme in this article: how to let Baidu include GitHub Pages personal blog. The last two schemes mentioned in this article are: one is to replace the DNS address of Ali Cloud, and the other is to create A record to mirror blog IP. In this article, the author chose the first one, and I chose the second one, and only for Baidu crawlers, other traffic or go to Github Pages rather than mirror service.

The last

This article mainly records the problems I have encountered since writing an independent blog, the methods to solve them, and the tools used, which basically meet the needs of writing a blog. The actual difficulty may not be great, but it is a process from 0 to 1. However, building a blog is not the core, the most important thing is to keep writing, continue to learn and summarize in the work, output valuable content, this is the initial intention of writing a blog.

Finally, attach my blog address and github Pages warehouse address, welcome to communicate with me:

Warehouse address: bugvanisher.github. IO

Blog address: bugvanisher.cn