preface

I believe that every programmer has a desire to have their own “home” — their own blog, exclusive website. In their own “home”, and like-minded brothers can share and discuss any technology, chat. More importantly, it can be used as the accumulation of their own skills to improve their own strength. So let’s talk about my blog building process.

Directory:

  1. Build Jekyll locally
  2. Develop or select a Jekyll theme
  3. Use the Github Pages service
  4. Applying for a Personal Domain name
  5. Add guest comments to your blog
  6. Request “little green lock “HTTPS
  7. Maintenance in the future

Build Kekyll locally

What is Jekyll? It is a simple static blog generation tool, as opposed to dynamic blogs.

  1. Simple. Since it does not require a database, markdown writes static files to generate Html pages, which has the advantage of increasing page response time and allowing bloggers to focus on writing articles without having to worry about layout.
  2. Static. Markdown (or Textile), Liquid, and HTML & CSS build publishable static websites.
  3. Blog support. Supports custom addresses, blog categories, pages, articles, and custom layout design.
// Install Jekyll using gem
gem install jekyll


Use Jekyll to create your blog site
jekyll new blog  # Create your site


// Enable the Jekyll service
// Enter the blog directory, remember to enter the directory created, otherwise the service will not start
cd blog         
jekyll serve      # Start your HTTP serviceCopy the code

After local service is enabled, Jekyll service default port is 4000, so I open the browser, type: http://localhost:4000 to access

At this point a simple blog page will appear.

Some of the other jekyll commands are as follows:

$ jekyll build
# => The contents of the current folder will be generated into the./_site folder.

$ jekyll build --destination <destination>
# => The contents of the current folder will be generated to the destination folder<destination>In the.

$ jekyll build --source <source> --destination <destination>
# => Specify the source folder<source>The content will be generated to the target folder<destination>In the.

$ jekyll build --watch
# => The contents of the current folder will be generated into the./_site folder,
# View changes and automatically regenerate.

$ jekyll serve
# => A development server will run at http://localhost:4000/
# auto-regeneration: enabled. Use '--no-watch' to close it.

$ jekyll serve --detach
# => Functions the same as the 'jekyll serve' command, but runs in the background without the terminal.
# If you want to shut down the server, you can use the 'kill -9 1234' command"1234"It is the process ID (PID).
# # if you can't find process, then using ` ps aux | grep jekyll ` command to check, and then shut down the server. [more] (http://unixhelp.ed.ac.uk/shell/jobz5.html).Copy the code

At the heart of Jekyll is a text conversion engine. The idea is that you write in your favorite markup language, be it Markdown, Textile, or just PLAIN HTML, and Jekyll will help you fit into a layout or a series of layouts. Along the way you can set the URL path, how your text will appear in the layout, and so on. All of this can be done with plain text editing, and the resulting static page is your finished product.

Let’s talk about the directory structure of Jeykll:

├ ─ ─ _config. Yml (profile) ├ ─ ─ _drafts (drafts (draft) is not post) | ├ ─ ─ the begin - with - the - crazy - ideas. Textile | └ ─ ─ on -- simplicityin- technology. Markdown ├ ─ ─ _includes (load these include the layout of the part to you) | ├ ─ ─ footer. The HTML | └ ─ ─ the header. The HTML ├ ─ ─ exactly (package on the outside of the articles of the template) | ├ ─ ─default.html | └ ─ ─ post. HTML ├ ─ ─ _posts (here are stored article) | ├ ─ ─2007- 10- 29- according to - every programmer - should - play - nethack. Textile | └ ─ ─2009- 0426 --barcamp-boston4 -Textile ├─ _site (all generated pages will be generated in this directory) ├─.jekyll- Metadata this file helps Jekyll track which files have not been modified since the last time the site was created. Which files need to be regenerated the next time the site is created. This file will not be included in the generated site. ├ ─ index.html (Web site index)Copy the code

Develop or select a Jekyll theme

Again speaking of the appearance of the blog, this may be a lot of people very important, a high standard of the blog to read the article is also a kind of enjoyment. This is where you need to customize the theme. You can choose to develop your own, or you can simply select the existing ones and change the CSS layout to make your own. Jekyll theme here, you can choose to your own favorite theme. Download it, modify the CSS, or borrow it, and you’ll have a nice blog.

Use the Github Pages service

1. Create our own warehouse

Use usename instead of your username

2. Configure our warehouse

Go to Settings and find Github Pages

Select Launch Automatic Page Generator

Next up is the Continue to Layouts screen

From there, select a template and click Publish Page

This generates a static web page that accesses the Settings just describedAddress: https://halfrost.com/username.github.io/At this address, you can access it.

The next thing we need to do is to deploy our Jekyll generated blog to Github Pages

3. The deployment of the blog

Clone the newly created repository with git, and then CD it to the repository directory and run jekyll serve-b

cd username.github.com
jekyll serve -BCopy the code

Note that before starting to ensure that other directory not jekyll services, can ps aux | grep jekyll check process, so, use a kill 9 process Kill the other processes.

Now let’s go to http://localhost:4000 and see the homepage we created on Github, which is theoretically identical to username.com/username.gi… The access should be exactly the same.

Then we copied the entire blog directory we made into the repository folder. Of course, the previous files in the repository can be deleted, leaving only the README. Push the entire file to Github

Git commit -m "commit to jekyll default page" # commit to local repository git push origin masterCopy the code

Before submitting, please make sure that the _config.yml file is configured as follows, because this is specified by Github Pages. If you select a different mode, you will receive an email warning immediately.

highlighter: rouge
markdown: kramdownCopy the code

After about 1-2 minutes, refresh username.github. IO again and you will see our blog.

Apply for a personal domain name

Now many places support personalized domain name, such as Sina Weibo, you can apply for a personalized domain name, so later as long as visit weibo.com/ your name, this website can direct your home page. Similarly, we want a name that goes directly to the front page of our blog, so we need to buy a domain name first. Generally, the most popular one in China should be Wanwang, and the one abroad is Go Daddy. Choose a username that you like, and if no one else buys the domain name first, congratulations, go buy it.

After buying a good domain name, it is a problem of configuration.

  1. To bind, we need to add a CNAME file in the username.github.com directory. Add your domain name to it, say example.com, and push the CNAME file to the remote repository: 
    git add CNAME
git push origin masterCopy the code
  2. Add your CNAME to your domain name provider. Add two records, @ and WWW host records, of type CNAME, where CNAME represents an alias record that maps multiple names to the same computer. Please write username. Github. IO. Note that there is a dot after IO.

Note that when adding @ records, there is probably a conflict with MX, so I just delete the @ rule. If you want to know why, you can actually look at this link,cn.v2ex.com/t/204489. I’ll just delete the at sign of MX myself.

If it is a domestic domain name, the resolution will be quick, usually within 10 minutes to complete the resolution. We will be able to access our blog directly by visiting the personalized domain we bought.

Add guest comment function to blog

Disqus is used to integrate static blogs to add guest comments. It’s usually at the end of a blog post, but it’s up to you how you design it. I will post my disqus integration code here. You’re probably all similar.

<section class="post-comments"> {% if site.comment.disqus %} <div id="disqus_thread"></div> <script> var disqus_config =  function () { this.page.url = "{{ page.url | prepend: site.baseurl | prepend: site.url }}"; this.page.identifier = "{{ page.url }}"; }; var disqus_shortname = '{{ site.comment.disqus }}'; (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = '//' + disqus_shortname + '.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); }) (); </script> <noscript> To view the <a href="http://disqus.com/?ref_noscript"> Disqus </a> comments, Please enable JavaScript</noscript> {% elsif site.comment duoshuo %} <div class="ds-thread" data-thread-key="{{page.url}}" data-title="{{ page.title }}" data-url="{{ page.url | prepend: site.baseurl | prepend: site.url }}"></div> <script type="text/javascript"> var duoshuoQuery = {short_name:"{{ site.comment.duoshuo }}"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript'; ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); }) (); </script> {% endif %} </section>Copy the code

Apply for “little green lock “HTTPS

To start with HTTPS, you can either apply for an HTTPS certificate using the free SSL certificate provided by Let’s Encrypt or use the service provided by KloudSec. Instead of applying for an SSL certificate, I’ll talk about the second way to use the service provided by KloudSec.

The implementation principle is described in Kloudsec documentation. HOW DOES IT WORK? It provides a service between our website server and our website visitors. The principle is to cache the pages on our server, so the actual HTTPS connection established by the user is between the user’s browser and Kloudsec.

First you sign up for a Kloudsec account, fill in your email address and password, and then it asks you to fill in the address and domain name of the warehouse, and it checks to see if the warehouse exists. Then finally, activate the Kloudsec account and log in.

Then comes the most critical step, is to set the domain name resolution rules.

According to the above, to set the resolution rule of 3 A. Once the setup is complete, click Verify DNS Records. If yes, you can proceed with the subsequent setup.

Here are some free and paid services for you to choose from.

If SSL Encryption is selected, the following Settings will be enabled.

If you don’t upload your own SSL, you’ll use it to generate a free SSL certificate for you. If you want to use your own, click the ADD CUSTOM CERT button to upload the SSL certificate.

Here are some plug-ins. See if you need it.

And finally, the IP address inside the SETTING. This IP address is available for GitHub Pages.

Benefits of using Kloudsec

  1. Get rid of the unfriendly message that the certificate is untrusted and has security risks.
  2. Convenient configuration, once and for all.
  3. Access speeds are not affected
  4. The little green lock looks good

Then I found a third way to access blogs using HTTPS: using the Pages service provided by GitLab, which directly supports adding SSL certificates with custom domain names that can be used in conjunction with SSL certificates requested for free. See how easy it is to create a secure blog at no cost.

Vii. Future maintenance

So far, individual blog also binds good domain name to go online successfully. There’s really not much maintenance to do.

1. Locally edited articles:

Use markdown to write your blog post first. Note that each post should be preceded by the following headings.

Date: 2016.06.21 01:57:32 +0800 Categories: Blog tag: Blog ---Copy the code

After the article is written, generate the page through Jekyll build, and view the article through jekyll serve-B via local localhost:4000.

2. Publish an online blog

Git add,git commit,git push git Pages After 1 or 2 minutes, visit your domain and you will see the new blog.

At the end

On the static blog construction here, if you have any unclear, please directly give me a message. There’s also hexo, which is a great static blog that you can try if you’re interested. That’s how Tang Qiao built her blog. Of course, there are also dynamic blog, ghost build, build dynamic blog need to buy a server, and then to install node.js environment, maintenance in the future also need their own person to complete. Interested students can also try!