You can use GitHub Pages to build a blog and record the whole process in detail. Everyone can create a blog.

The article keeps updating every week, everyone’s “three company” is the biggest affirmation to me. WeChat can search the public number “back-end technology school” the first time to read (generally updated one or two articles earlier than the blog)

start

First look at the overall effect of the blog. Click online to preview my blog

Support feature

  • Simple Style Blog
  • Powered By Jekyll
  • Blog post search
  • Custom social links
  • Website Visitor Statistics
  • Google Analytics Web Analytics
  • Gitalk comment feature
  • Customize the About page
  • Support Chinese layout
  • Support for archiving and tagging

Create a blog Git repository

The first step is to have your own blog repository on GitHub, where you can generate and host blog posts. You can just fork my blog repository. You immediately have your own repository of blogs.

Click on my blog here to go to fork, and you’ll see the newly copied repository under your own repository. All future operations will take place in your own warehouse.

Copyright: After fork, the _posts folder contains my blog posts, which are copyrighted by me. You can choose to delete the article and replace it with your own or reprint it with a link to the source.

Modify the blog repository name

Go to your own blog repository and change the name of the blog repository to your own username. The name of the username. Github. IO repository is found when the Github page is resolved.

At this point, no accident of words, will be able to see you just open the domain name https://username.github.io blog set up. Be sure to replace the username with your own GitHub username.

Blog configuration

Click on the domain name above to see my blog configuration, the name of the blog is also mine. You also need to change the configuration for your blog.

The configuration file for the blog is the _config.yml file in the root directory of the repository, which you can directly click to edit.

You also need to change the following configuration:

Blog name and description

The name and description of your blog, and write whatever you want.

Blog Social Links

The social link button is configured here. If it is not matched, it will not be displayed. Now I have three accounts: Zhihu, Email and GitHub. Anything else you want to add yourself can be added.

Configuration gitalk

This is the configuration of the comment function. The comment function is based on Gitalk. Find the Gitalk configuration project in the configuration file:

Change the rules as follows:

Gitalk: clientID: < your clientID> ClientSecret: < your ClientSecret > repo: < your Repository name > Owner: < your GitHub username >

The principle is to use GitHub’s Issues comment articles. The ClientId and ClientSecret need to be created by clicking here

Click the green button to create. After success, you will get the above two IDs. You can modify the configuration.

Google webmaster statistics

The first thing you need to do is sign up for a Google Analytics account, which provides you with a wealth of website data on how many people visit your blog site, where you visit it, and so on. You don’t have to skip this if you don’t care. I need to delete my google_analytics: ua-xxxxxx-x from the configuration, otherwise it will be calculated to me.

# Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking
google_analytics: UA-XXXXXXX-X

Below is my website real-time analysis page display:

Due to undescribable reasons, domestic account registration may encounter problems, so do not configure it is ok.

Blog URL configuration

# Your website URL (e.g. http://barryclark.github.io or http://www.barryclark.co)
# Used for Sitemap.xml and your RSS feed
url: https://yourname.github.io

Configure your own blog address here.

Configuration to submit

Changes to _config.ymld need to be committed to take effect. Click the green button in the image below to commit.

done! Now enter the address of the blog mentioned above, press enter and you have your own blog.

How to Write a Blog

Okay, so the blog is here. How to update the article?

Use Markdown syntax and upload your posts to a _post folder. Git pages are automatically pulled from your Git repository and parsed into web pages that are instantly viewable on your blog.

About the naming format of the article: the blog article must be in accordance with the unified naming format yyyy-mm-dd-blogname. md For example, the name of my blog is 2019-11-22-create_blog_with_github_pages.md

See here, if just want to write a blog, do not look at the following chapters, the following chapter is to record some DIY process.

Local Blog Preview

So far, we have submitted articles that must be uploaded to the GitHub repository before they can be previewed. If you want to finish writing in the local browser to see the effect before uploading is also OK, because not everyone has such a need.

Install Ruby and DevKit

Download the Ruby+ DevKit package from the Ruby+ DevKit website here. Install, pop-up window select 3

Gem -v ruby -v: The version number of the gem -v ruby -v: The version number of the gem -v ruby -v

If you are inside a wall, you need to switch the installation source to https://gems.ruby-china.com/. Please ignore outside the wall.

Gem sources –add https://gems.ruby-china.com/ –remove toggle install source

Gem source-l view version

Bundler installation

Gem install bundler

` bundle – v view version bundle config mirror.https://rubygems.org https://gems.ruby-china.com ` switch installation source

Install jekyll

gem install jekyll

Preview the blog

After Jekyll Server input, open the browser and type localhost:4000 to see the blog content.

If you are not so successful, then the following error resolution for reference

Common mistakes

  • Missing a package

Install Jekyll-Paginate. Install Jekyll-Paginate. Install Jekyll-Paginate.

  • Permission denied

    Socket.rb :201: In bind :Permission denied -bind (2) for 127.0.0.3:4000 (Error:EACCES)

Error: port 4000 is not available.

  1. Netstat ano | findstr searches “4000” find the process ID occupy 4000 port
  2. If you look at the last column of numbers, it is PID=312964

  1. Open Windows Explorer and end the process.

  1. $ tasklist|findstr 312964You can also view the process name, check it to the end of the same step 3.

Search function integration

The blog template is not intended to have a Search function, which relies on simple-jekyll-search for support.

Configure the search. Json

Copy this code to the root of your blog

This profile represents blogs that can be searched by title, tag, date, and category.

Download the simple-jekyll-searchj file

Download the entire folder containing simple-jekyll-search.min.js and simple-jekyll-search.js together with the js folder under your root directory.

Configure the search box label

On the page where you want to display the search box mine is index. HTML, this page is related to everyone’s blog template, may need a little front-end knowledge, add the following HTML tags.

<div class="search-container"> <input type="text" id="search-input" placeholder="search blog posts..." > <ul id="results-container"></ul> </div> <! --script src="https://unpkg.com/simple-jekyll-search/dest/simple-jekyll-search.min.js"></script--> <script src="{{ site.baseurl }}/js/simple-jekyll-search.min.js"></script> <script> window.simpleJekyllSearch = new SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '{{ site.baseurl }}/search.json', searchResultTemplate: '<li><a href="{url}?query={query}" title="{desc}">{title}</a></li>', noResultsText: 'No results found', limit: 10, fuzzy: false, exclude: ['Welcome'] }) </script>

One is to use cloud JS and the other is to use local JS if it is available locally.

<script src="https://unpkg.com/simple-jekyll-search/dest/simple-jekyll-search.min.js"></script-->

<script src="{{ site.baseurl }}/js/simple-jekyll-search.min.js"></script>

The configuration is complete, the blog is opened, and you get a search box that looks like this.

Search box style

The style of the search box can be changed. Here are some ways to modify the CSS style in HTML. I do the back end.

HTML inserts the tag style method

Social link

The link provided by the template does not have Zhihu link, or you want to add a custom link, you can use the following methods to add. Take adding a Zhihu link as an example

The linked image is in SVG format (I just know). What is SVG and Viewbox

viewBox

The value of the viewBox property is a list of four arguments
min-x.
min-y.
width and
height, delimited by Spaces or commas, specifies a rectangular region in user space that maps to the given element, view properties

Explore the SVG tutorial in depth

Configuration _config. Yml

Footer-links: weibo: yourname # Please enter your Weibo domain name https://www.weibo.com/<yourname> zhihu: Yourname # input you know by the name on the home page link to https://https://www.zhihu.com/people/ < yourname >

Modify the SVG – the ICONS. HTML

Because in footer. HTML svg-icons are called to generate social links.

Svg-icon. HTML was called first to display the social links, so change _include/svg-icons. HTML to add the Zhihu link

{% if site.footer-links.zhihu %} <li><a href="https://zhihu.com/people/{{ site.footer-links.zhihu }}" class="icon-2 Zhihu "title=" zhihu" >< SVG viewBox="0 0 600 600"><path d="M170.54 148.13v217.54l23.43.01 7.71 26.37 42.01 26.37 h49.53 V148.13 H170.54 zm97.75 193.93 h - 27.94 l - 27.9 17.51-5.08-17.47-11.9-04 v171. 75 h72. 82 v170. 31 zm - 118.46-94.39 H97.5 c1.74-27.1-2.2-51.59 2.2-73.46 H51.16S1.97-22.56-8.58-22.31H-88.5 C3.49-13.12 7.87-26.66 13.12-40.67 0 0-24.07 0-32.27 21.57-3.39 8.9-13.21 43.14-30.7 78.12 5.89-.64 25.37-1.18 36.84-22.21 2.11-5.89 2.51-6.66 5.14-14.53h28.87c0 10.5-1.2 66.88-1.68 73.44h20.83 C-11.74 0-15.56 23.62-15.56 23.62h65.58c66.45 321.1 42.83 363.12 0 396.34c20.49 5.85 40.91-.93 51-9.9 0 0 22.98 20.9 35.59 69.25 64.94 s7.91 l53.96-26.89-1.24-39.99 - c - 7.58-8.92-28.06-33.06-36.79-41.81 L87.9 c4.36 311.95 to 13.98 6.99 27.55 7.87 40.67 h61.65. S - 09-23.62-7.59-23.62 v. 01 zm412. 02 c20.83-1.6-25.64, 44.98 to 58.57 44.98-58.57S-18.65-14.8-27.38-4.06 C-6 8.15-36.83 48.2-36.83 48.2l19.23 14.43 ZM-150.09-59.09 C-9.01-8.25-25.91 2.13-25.91 44.98-58.57S-18.65-14.8-27.38-4.06 C-6 8.15-36.83 48.2l19.23 14.43 ZM-150.09-59.09 C-9.01-8.25-25.91 2.13-25.91 2.13 S39.52 55.04 41.12 57.45 L19.46-13.73 S-25.67-37.61-34.66-45.86H -.01ZM640 258.35 C-19.78 2.13 S39.52 55.04 41.12 57.45 L19.46-13.73 S-25.67-37.61-34.66-45.86H -.01ZM640 258.35 C-19.78 0-130.91.93-131.06.93v-101c4.81 0 12.42-.4 22.85-1.2 40.88-2.41 70.13-4 87.77-4.81 0 0 0 12.22-27.19-.59-33.44-3.07-1.18-23.17 4.58-23.17 4.58s-165.22 16.49-232.36 18.05c1.6 8.82 7.62 17.08 15.78 19.55 13.31 3.48 22.69 1.7 49.15.89 24.83-1.6 43.68-2.43 56.51-2.43 v99.81h351.41s2.82 22.31 25.51 22.85h107.94v70.92c0 13.97-11.19 3.48 22.69 1.7 49.15.89 24.83-1.6 43.68-2.43 56.51-2.43 v99.81h351.4s2.82 22.31 25.51 22.85h107.94v70.92c0 13.97-11.19 21.99-24.48 21.12-14.08.11-26.08-1.15-41.69-1.81 1.99 3.97 6.33 14.39 19.31 21.84 9.88 4.81 16.17 6.57 26.02 6.57 29.56 0-17.28-44.89-45.31 v - 73.32 45.67 h122.36 c9.68 0 8.7 23.78 8.7 23.78 l. 03 -.01 z "/ > < / SVG > <! --[if lt IE 9]><em>YouTube</em><! [endif]--></a></li> {% endif %}

Viewbox specifies the size of the image.

You can get most of the SVG material from here. For example, Zhihu’s SVG file is here. Click the RAW button to view the source file, and copy the content after Path D = to the above configuration.

Add site count

Website statistics provided by the garlic, that is, you can count the number of current visits to the site and the number of people. Configuration is also very simple, the official guidelines are here.

Modify the page HTML

If you want the statistics to be displayed on which page, you need to modify the HTML of that page to add the following:

<! - not site visitor statistics - > < script async SRC = "/ / busuanzi. Ibruce. Info/busuanzi / 2.3 / busuanzi. Pure. The mini. Js" > < / script > <! -- PV way, a single user continuously click on n articles, FONT-FAMILY: console; FONT-FAMILY: console; FONT-FAMILY: console; FONT-FAMILY: console; FONT-FAMILY: console; color:Silver; font-size:12px;" > View:<span id="busuanzi_value_site_pv" style="font-family:Consolas; color:Silver; font-size:12px;" ></span> </span> <! <span id="busuanzi_container_site_uv" style="font-family:Consolas; font-family: 'Consolas'; font-family:' Consolas'; color:Silver; font-size:12px;" > User:<span id="busuanzi_value_site_uv" style="font-family:Consolas; color:Silver; font-size:12px;" ></span> </span> </div>

Style tag description

You can change the font color and size using the style tag. Specific reference: HTML color table and HTML style properties

eg. style=”font-family:arial; color:Gainsboro; font-size:10px; text-align:right; width:200px; background-color:gray;

How to send pictures

Write markdown the most headache is the insertion of the picture, recommend using PicGo one key upload link, you can directly insert markdown.

Picgo supports picture uploading on GitHub, SM.MS, AriCloud, Texun Cloud and other mainstream picture beds or clouds. Drag pictures directly, upload them to the cloud, and get the link in one step, which is convenient and fast.

Other features

Small feature

Useful GitHub plugin

Site structure

The index.html of the root directory generates the blog home page

_include/footer.html generates the sidebar

_include/svg-icons.html generates links to social avatars

Thank you

This blog is possible thanks to Jekyll’s technical support.

Thanks to Loffer for providing the original template on which I did the secondary development.

More and more

More technology to share, WeChat search public number “back-end technology school” reply “information” I have prepared for you a variety of programming learning materials. See you next time!