I started blogging in 2016 and have written about 200 posts one by one. Blogging has many benefits. One is that it forces you to summarize what you’ve learned. Secondly, your blog is like your resume, which records your learning process. By writing a blog, you can let others know you and make more friends in the industry. Third, blog plays a role in spreading knowledge, especially technical blogs can help others solve technical problems, helping others is a happy thing, why not? So blogging is crucial for programmers, and I’ve already talked about what blogging has done for me in my previous posts.

I started blogging with Jane Books and was attracted to her elegant markdown writing style. When I first started to write articles, I was very happy that one article could reach hundreds of readers. I would be happy for several days if I could be recommended by Jane book to the home page. In Jianshu, I got to know A monk named Mudong, and I set up jianshu circle at that time, and maintained a very good friendship, which is very precious.

At the beginning of 2017, I transferred my blog to CSDN, because CSDN occupied the highest weight in Baidu search engine. Later, it was proved that my judgment was correct. The reading volume of my CSDN blog posts soared, allowing more and more people to read my blog.

Just last month I read the innocently smiling blog about how tech people build their own tech blogs, and I decided to take the plunge and build my own personal blog.

In fact, in 2017, I started to build my own personal blog, using Jekyll static blog, hosted on Github, and bought my own domain fangzhipeng.com, cname on Github. Because github network is unstable, the experience is really poor, has not done much care, in a state of unmanaged.

At the beginning of this month, I migrated my personal blog to my own server and put it out in the group. Someone asked me to write a blog post and let him refer to how to build his own personal blog. So I took the time to write this article.

This article introduces how to set up my personal blog in detail.

Use Github to host your blog

Hosting a blog on Github is as simple as forking your favorite blog, changing the fork project name to {github-username}.github. IO, and deleting the original blog post and putting your own blog post on it.

Such as the theme of my blog is using https://github.com/Huxpro/huxpro.github.io, first of all, I will fork the project, and the project name change after the fork for forezp. Making. IO, Readers will need to replace forezp with their Github username.

Then go to forezp.github.com to visit blogs on the subject. Git Clone the modified project, modify the configuration according to the topic description, delete the original blogger’s article, replace it with your own blog, Git push the modified project to Github, Github Pages will automatically build, according to your modification content to generate pages. Github-username {github-username}.github. IO to view the modified content.

If you need your own domain name, you can apply for one on Aliyun. For example, my domain name is fangzhipeng.com. The domain name resolution configuration in the console of Ali Cloud is as follows:

Add CNAME file to the root directory of the project, write the domain name you apply for, such as mine:

www.fangzhipeng.com

{github-username}.github. IO will also show you the domain name you requested.

Note that the domain name needs to be put on record.

Deploy your blog using your own server

Using Gthub to build personal blog is simple, fast and convenient, but Github is in foreign countries ah, the network is extremely unstable, the access speed is slow, making people crazy, then you can deploy your blog on ali Cloud ECS. ECS need to buy oh, those who need to buy click here to get a voucher.

I use Jekyll to build the blog, so I need to install Jekyll environment in the service, my server system version is entOS 7.2, installed Jekyll version is 3.8.4.

Install jekyll mainly refer to the https://jekyllcn.com/docs/installation/, because the installation process is complicated and the fault is more, now in detail, in the process of I install jekyll and pit.

Install the Node

To install the Node environment, run the following command:

Wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz xz - d node - v8.12.0 - Linux - x64. Tar. Xz tar xf Tar ln -s ~/node-v8.12.0- Linux -x64/bin/node /usr/bin/node ln -s ~/node-v8.12.0- Linux -x64/bin/npm /usr/bin/npm node -v npmCopy the code

Install ruby

Jekyll relies on the Ruby environment. To install Ruby, run the following command:

Wget https://cache.ruby-lang.org/pub/ruby/2.4/ruby-2.4.4.tar.gz mkdir -p/usr/local/ruby tar ZXVF - ruby - 2.4.4. Tar. Gz CD /configure --prefix=/usr/local/ruby make && make install CD ~ vim.bash_profile source.bash_profileCopy the code

Install GCC

To install GCC, run the following command:

yum -y update gcc
yum -y install gcc+ gcc-c++

Copy the code

Install jekyll

Finally, install Jekyll and execute the following command

gem install jekyll
jekyll --version
gem update --system

Copy the code

You can verify that the installation was successful by viewing the version by jekyll –version, and if the installation is successful, the correct version number is displayed.

Possible problems during installation

Using Jekyll to create a blog template and start the Server service, execute the following command:

jekyll new myblog
cd myblog/
jekyll serve

Copy the code

When executing the jekyll serve command, my server environment reported the following error:

`block in verify_gemfile_dependencies_are_found! ': Could not find gem 'minima (~> 2.0)' in any of the gem sources listed in your Gemfile. (Bundler::GemNotFound) from / usr/local/ruby/lib/ruby/site_ruby / 2.4.0 bundler/resolver. Rb: 257: ` in each 'Copy the code

To install bundler and Minima, run the following command:

gem install bundler
gem install minima

Copy the code

Deploy my blog

Deploying a blog requires compiling the blog on the server, which is then placed on a static path to the Nginx service

Compile the blog

To use git tools, download the code on Github and run the following command:

git clone https://github.com/forezp/forezp.github.io
cd forezp.github.io
jekyll serve

Copy the code

The jekyll serve command will compile the source code I downloaded from Github.

Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly.
  Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. 
Copy the code

Sitemap and Paginate plugins are required to install your blog.

gem install jekyll-sitemap
gem install jekyll-paginate

Copy the code

Run the jekyll serve command again. The command is successfully run. Then you can run the curl command to view the blogs deployed on the server.

Deploy to Nginx server:

Static files compiled by Jekyll need to be mounted to the Nginx server, which needs to be installed. Refer to the http://nginx.org/en/linux_packages.html#mainline installation process

According to the document, the new file/etc/yum repos. D/nginx. ‘, in and save the file to edit the following content:

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1
Copy the code

Then execute the install nginx command as follows:

yum install nginx

Copy the code

After the success of the Nginx configuration, you need to set up Nginx configuration, configuration file path for the/etc/Nginx/conf. D/default. Conf, the content of the configuration is as follows:

server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; } error_page 404 /404.html; error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}Copy the code

After installing the Nginx server successfully, export the static HTML file compiled by Jekyll to the Nginx server and execute the following command:

jekyll build --destination=/root/blog/html

Copy the code

Start Nginx server, you can normal blog pages, if you need to access in the browser, you need to expose port 80 in the security component of ali Cloud ECS console. If you want to access by domain name, you need to point the domain name resolution Settings to your server.

Non-www domain names are redirected to WWW

For example, I want to visit http://fangzhipeng.com redirect to http://www.fangzhipeng.com, need in Nginx configuration file/etc/Nginx/conf. D/default. Conf, modify configuration the following contents:

listen       80;
    server_name  fangzhipeng.com www.fangzhipeng.com;


    if ( $host! ='www.fangzhipeng.com' ) {
          rewrite "^ / (. *) $" http://www.fangzhipeng.com/The $1 permanent;
         }

Copy the code

Automated deployment

Github webhook can be set up to automate build and deployment. The github repository will trigger the webhook you set up and send a POST request to the webhook address you set up. For example, the request I set up is a Nodejs program running on the server, listening for the request of Gitub Webhook, after receiving the request, Can execute shell commands.

First, set the webhook making warehouse, in making warehouse project interface, my project interface https://github.com/forezp/forezp.github.io than me, Click Setting->Webhooks->Add Webhook to Add the configuration information of Webhooks.

  • Payload URL: www.fangzhipeng.com/incoming
  • Content type: application/json
  • Secret: a123456

In this way, Webhook is successfully set up. Now, I use the open source component to listen to Github Webhook request sent by the server where the blog is located. The project address is: github.com/rvagg/githu…

npm install -g github-webhook-handle
Copy the code

After the installation is successful, create the deploy.js file under /root/node-v8.12.0-linux-x64/lib/node_modules/github-webhook-handler.

var http = require('http')
var createHandler = require('github-webhook-handler')
var handler = createHandler({ path: '/incoming', secret: 'a123456' }) 
 
function 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(3001)
 
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'['./start_blog.sh'].function(text){ console.log(text) });
})

Copy the code

In this code, we specify nodejs port 3001, listen for path/incoming, and Secret to a123456. This is consistent with Github Webhook. Run_cmd (‘sh’, [‘./start_blog.sh’], specifies that the./start_blog.sh file will be executed when the request is received.

echo `date`
cd /root/forezp.github.io
echo start pull from github 
git pull
echo start build..
jekyll build --destination=/usr/share/nginx/html

Copy the code

You then need to use forever to start the deploy.js service by executing the following command:

Sudo NPM install forever -g # Install $forever start deploy.js # start $forever stop deploy.js # close $forever start -l Forever. The log - o out. The log - e err. Log the deploy. Js # output logs and error/root/node - v8.12.0 - Linux - x64 / lib/node_modules/forever/bin/forever Start -l forever.log -o out.log -e err. / root/node - v8.12.0 - Linux - x64 / lib/node_modules/forever/bin/forever start - a - l forever. The log - o out. The log - e err. Log deploy.jsCopy the code

The last step is to forward the listening /incoming requests to the NodeJS service in the configuration file of the nginx server.

Location = / incoming {proxy_pass http://127.0.0.1:3001/incoming; }Copy the code

Github sends a webhook request to your server. When the server receives the request, it executes the sh command. The sh command includes the process of repulling and compiling the code, and automated deployment is complete. The server triggers the pull code and recompile.

supplement

Blog can set up Baidu statistics, Google analysis, not garlic child statistics, Gittalk message board and other functions, these functions need to apply for their own accounts, relatively simple to achieve, specific their own Baidu.

In addition, if the blog needs HTTPS protocol, you need to apply for a free SSL certificate in Ali Cloud, after the application, you can check the Nginx installation SSL certificate tutorial on Ali Cloud, and do the configuration, according to its tips, relatively simple. Finally involved for a redirection problem, such as my web site, I need to be all redirect to fangzhipeng.com, www.fangzhipeng.com, fangzhipeng.com, https://www.fangzhipeng.com, In this case, you need to modify the nginx configuration file default.conf. Now I have posted my complete configuration as follows:

server { listen 80; server_name fangzhipeng.com www.fangzhipeng.com; return 301 https://www.fangzhipeng.com$request_uri; } server { listen 443; server_name fangzhipeng.com; return 301 https://www.fangzhipeng.com$request_uri; } server { listen 443 default_server ssl; server_name www.fangzhipeng.com; #if ( $host ! = 'www.fangzhipeng.com' ) { # rewrite "^/(.*)$" http://www.fangzhipeng.com/$1 permanent; # } ssl on; root html; index index.html index.htm; ssl_certificate cert/215042476190582.pem; ssl_certificate_key cert/215042476190582.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:! NULL:! aNULL:! MD5:! ADH:! RC4; Ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; location / { root /usr/share/nginx/html; index index.html index.htm; } error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}Copy the code

At this point, my blog construction process is all explained, if you have any questions, please add my wechat Miles02 (remarks blog questions) and discuss with me, if many people ask, I consider setting up a communication group, we discuss and answer questions together. You can also leave your blog on the message board and let everyone visit each other.

Blogging requires persistence and sharing. I read the pure smile of the blog, just have the power to toss about their own blog, I hope you read my blog, will have their own impulse to build a blog, and then start their own complete build, thank you.

Pay attention to my public number, communicate together