Last time someone commented that technical blog is standard for programmers, but as far as I know most technical students still don’t have their own technical blog. There are a lot of reasons, some are lazy to write, some are afraid of writing bad, still have a lot of always want to hold back a big move, fantasy to perfect and then issued, the result has been stillborn. But in fact, more programmers do not know how to build a blog, in fact, now it is very easy to build a personal technology blog, the simplest way to build is to use GitHub Pages + Jekyll, my blog is using this technology.

GitHub Pages

Github Pages is a public static page hosting service for users, organizations and projects. The site can be hosted on Github for free. You can choose to use the default domain name Github Pages or custom domain name to publish the site. Github Pages supports automatic site generation from Jekyll, as well as pure HTML documents. Hosting your Jekyll site on Github Pages is a good choice.

Github Pages has the following advantages:

  • Completely free, including server, traffic, domain name and so on, completely free to set up a technical blog
  • Blogging is all about submitting code to align the writing and programming experience
  • You can bind your own domain name
  • Provides popular theme templates for web pages

There are drawbacks:

  • There is no support for dynamic content, blogs must be static pages, and Jekyll is used to build content.
  • Blogs cannot be indexed by Baidu. Github blocked Baidu because of the conflict between Github and Baidu.
  • The storage space is less than 1 GB
  • The monthly traffic does not exceed 100G
  • Update no more than 10 times per hour

Github Pages uses Jekyll to build content, so what is Jekyll?

Jekyll is introduced

Jekyll is a simple blog-like static site production machine. It has a template directory that contains documents in raw text format, which is converted by a converter (such as Markdown) and our Liquid renderer into a complete, publishable static website that you can publish on any of your favorite servers. Jekyll also runs on GitHub Page, which means you can use GitHub’s services to build your project pages, blogs, or websites, and it’s completely free.

However, if we only use it on GitHub, we don’t need to know Jekyll’s syntax. GitHub will automatically convert Markdown files we write into static pages. To use Jekyll, you need to use Markdown syntax to write your articles, but Markdown syntax is very simple and can be mastered in two or three days as a programmer. You can also refer to this article: Markdown use summary.

Share some Jekyll topics with you. There are many jekyllthemes.org/ topics for you to choose according to your personal interests.

My personal blog

My blog went through three phases. In the first phase, IT was built entirely using GitHub Pages. In the second stage, the blog is hosted by a foreign service provider. The third stage, server migration back to domestic, domain name record. I have written several previous posts on tech blogs, as follows:

  • Tracking the death of blogs for thousands of miles
  • After 25 days, my blog (www.ityouknow.com) is alive again
  • Tech blog stuff

Using Github Pages + Jekyll to build a technical blog is very simple, basically the steps are to find a favorite topic on the Internet, Fork to your own Github, then delete the content of the original blog, upload your own articles can be, take my own blog for example.

I originally used Yumy-Jekyll for my blog, but that theme hasn’t been updated in over two years. Therefore, I made some changes based on this theme in the later period, including the update of dependent components and the revision of individual pages based on personal situation, which became the present look:

The reason for using this theme is that I prefer a clean, atmospheric style, and the blog theme supports code presentation well.

Build a blog quickly

Take my blog as an example to introduce how to build a blog quickly. This was also the first stage of my blog experience.

1, first open the address github.com/ityouknow/i… Click the Fork button to make a copy of the code to your repository.

A minute later, your Github repository discovers an ityouKnow.github. IO project.

Delete the CNAME file

Delete the CNAME file in the project. CNAME is the content used when the domain name is customized. If the customized domain name is not used, there will be conflicts.

3. Set GitHub Pages

Click the Settings button to open the Settings page, scroll down to GitHub Pages Settings, select Master Branch from the check box under Source, and click the Save button next to it to Save the Settings.

Rename the project

Click the Settings button to open the Settings page and rename the project to github_username. Github. IO.

Github_username is your Github login username

5. After the rename, go back to Settings > GitHub Pages again

You’ll find an address like https://github_username.github.io

At this point, when you visit this address, you can see the front page of the blog, but when you click on the post, the link redirects to the wrong address, because a file is missing.

6. Configure _config.yml

Open the _config.yml file in the project directory and modify the following configuration:

repository: github_username/github_username.github.io
github_url: https://github.com/github_username
url: https://github_username.github.io
Copy the code

At this point, visit https://github_username.github.io and you will find that the blog has been built. All that’s left is to go to the _posts directory of the project and delete my posts, and then write my own posts using Jekyll’s syntax.

Github_username is your Github ID.

Custom domain name

While blogs can be accessed via https://github_username.github.io, GitHub Pages is also available for those who want to use their own domain names to access blogs.

First, you need to set up domain name resolution, which points to your github blog address. This section uses the domain name configuration of Wanwang as an example. Select a domain name and click Resolve. Add the following two records on the domain name resolution page

In the red box, enter your github_username value.

Then open the project Settings > GitHub Pages page, enter the domain name: xxx.com under the input box of Custom Domain, and click Save.

Reconfigure _config.yml

Open the _config.yml file in the project directory and modify the following configuration:

url: http://www.xxx.com
Copy the code

After one minute, visit www.xxx.com.

Custom DIY blog

General students to the above step is also completed, basically meet the needs of 80% of technical students. But there are still some students have higher pursuit, such as using Github Pages although simple and convenient, but can not be searched by Baidu lost a large number of traffic, there is another reason sometimes, the stability of blog network access is not very high.

I had a couple of virtual machines in a foreign country that I used for it and then installed an Nginx as a server for static pages. First OF all, I installed the Jekyll environment on the local machine (Win10), the Github blog code downloaded down, compiled into static Html on the local machine, and then manually uploaded to the service under the Nginx directory; Then point the domain name to the virtual machine.

Win10 install Jekyll environment is a painful experience.

So cumbersome steps it took me a few months later, is really can’t stand, on the one hand, due to a server in a foreign country, sometimes still unstable (perhaps because the server installed agents), on the other hand I need to use some features, use of these functions is the premise of web site need to put on record, tencent cloud doing activities during that period, the blog and moved back from abroad, I’ve re-optimized the process.

This script will automatically pull the latest updated files from Github, and automatically produce static Html files and push them to the Nginx directory. The domain name will point to this server again. You can set up hooks on Github that automatically trigger scripts when submitting code, or trigger scripts periodically to publish articles.

The script content is as follows:

cd /usr/local/ityouknow.github.io
git pull http://github.com/ityouknow/ityouknow.github.io.git
jekyll build --destination=/usr/share/nginx/html
Copy the code

The prerequisite for executing this script is to install the Git \jekyll environment. There are many examples on the web that will not be described here. The Jekyll environment setup and use can be found here: jekyllcn.com/docs/home/

Automated deployment

These two days, I saw Fang Zhipeng engaged in automatic deployment, and I also practiced some steps according to him. It was very good, so I wrote the paragraph of automatic deployment.

Configuration Webhook

A Webhook in development is a way to add or change the behavior of a Web page or Web app through a common callback. These callbacks can be maintained, modified, and managed by third party users and developers who are not associated with the original development of the site or application. The term Webhook was first coined by Jeff Lindsay at the Computer Science Hook Project in 2007.

In plain English, the repository automatically triggers a URL-type notification when it receives a code submission, and you can do things like submit code and automatically deploy the project.

Github has Webhook functionality that we can configure directly to use.

In making the warehouse project interface, such as this blog project https://github.com/ityouknow/ityouknow.github.io, click the Setting – > Webhooks – > Add Webhook, After adding the Webhooks configuration information, my configuration information is as follows:

Payload URL: http://www.ityouknow.com/deploy
Content type: application/json
Secret: 123456
Copy the code

The diagram below:

Server accepts push

We need to set up a service on the blog’s server to receive Github’s push of submitted code to trigger the deployed script. There is an open source project on Github that does just that: Github-webhook-handler.

This open source project is designed to receive notifications from Github and execute deployment scripts. However, it is developed using NodeJs, so we need to use Node environment on Centos first.

Centos7 Install Node

First add the source

Sudo RPM - the ivh HTTP: / / https://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-7-11.noarch.rpm / / yum to install node. Js yum install -y nodejsCopy the code

Install github- webhook-Handler

npm install -g github-webhook-handler     # installed making - webhook - handler
If the installation is not successful, you can choose Method 2 to install it
npm install -g cnpm --registry=http://r.cnpmjs.org
cnpm install -g github-webhook-handler
Copy the code

After the installation is successful, we need to add a script. Go to the installation directory:

cd  /usr/lib/node_modules/github-webhook-handler
Copy the code

A new deploy. Js

vi deploy.js
Copy the code

The script content is as follows:

var http = require('http')
var createHandler = require('github-webhook-handler')
var handler = createHandler({ path: '/deploy', secret: 'ityouknow'}) // Listen to the request path, and Github configured passwordfunction run_cmd(cmd, args, callback) {
  var spawn = require('child_process').spawn;
  var child = spawn(cmd, args);
  var resp = "";
 
  child.stdout.on('data'.function(buffer) { resp += buffer.toString(); });
  child.stdout.on('end'.function() { callback (resp) });
}
 
http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404
    res.end('no such location')})}).listen(3006)// Listen to the port handler.on('error'.function (err) {
  console.error('Error:', err.message)
})
 
handler.on('push'.function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref);
  run_cmd('sh'['/usr/local/depoly.sh'].function(text){ console.log(text) }); // Execute the script after success. })Copy the code

The script’s job is to start a listening port to receive the request, and execute the deployment script once the request is received, with the key points of the script content annotated.

The script for deploying the blog is depoly.sh

echo `date`
cd /usr/local/ityouknow.github.io
echo start pull from github 
git pull http://github.com/ityouknow/ityouknow.github.io.git
echo start build..
jekyll build --destination=/usr/share/nginx/html
Copy the code

It’s just pulling code and deploying it.

The script starts with one of the nodes that manages Forever. Forever is a NodeJS daemon that can start, stop, and restart our apps.

To start the deploy.js service, run the following command:

npm install forever -g   # installation
$ forever start deploy.js          # start
$ forever stop deploy.js           # close
$ forever start -l forever.log -o out.log -e err.log deploy.js   # Output logs and errors/ root/node - v8.12.0 - Linux - x64 / lib/node_modules/forever/bin/forever start-l forever.log -o out.log -eErr, log the deploy. If js error: / root/node - v8.12.0 - Linux - x64 / lib/node_modules/forever/bin/forever start-a -l forever.log -o out.log -e err.log deploy.js
Copy the code

Nginx adds a forwarding configuration to Nginx to forward the deploy request to the nodeJS service. The configuration code is as follows:

Location = / deploy {proxy_pass http://127.0.0.1:3006/deploy; }Copy the code

So we have finished the whole deployment automation is, every time to submit code, making will send Webhook to address, http://www.ityouknow.com/deploy, Nginx forward/deploy address to Nodejs port 3306 service, Finally, github- webhook-Handler is used to execute the deployment script to achieve automatic deployment.

In the future, we just need to submit code to Github, which will automatically trigger the automatic deployment of the blog.

Problems that might arise

Some small partners feedback in the clone blog appeared some problems, here concentrated reply.

1. Lost format after clone blog

This is the first question that many readers respond to, because my blog CSS and images are in a different domain: www.itmind.net, so this one needs to be local.

IO \_includes two folders: head. HTML and footer. HTML. http://www.ityouknow.com/xxx/xxx to relative path from the file / / XXX to XXX.

2. The message function is lost

The gitalk configuration in _config.yml should be modified. Configure gitalk using jekyll-theme-H2O. After registration, you need to configure the following information in _config.yml:

gitalk:
    owner: ityouknow
    repo: blog-comments
    clientID: 61bfc53d957e74e78f8f
    clientSecret: 31c61e66cdcc9ada8db2267ee779d0bdafac434c
Copy the code

Change this to your registered information

3, blogs,

Blog is still missing retrieval function, next and last page function, series of article optimization view function, we clone after the perfect function, also please help pay attention to, together to improve the blog better.

Finally, you can leave your personal blog address in this article, convenient peers watch, exchange, learning.