Build your own blog using GitHub pages+jekyll (Windows edition)

The latest whim is to try GitHub pages to build a blog. A whole bunch of online searches, uh ... It seems to be quite simple ... So I roll up my sleeves and do ...

Results for my this kind of github registered, git useless, Ruby, Jekyll is not know the small white, all the way the feeling of the pit, really not too sour cool ...

Here's a record of the process of building a blog from scratch:

Say, the great god please detour, do not like to spray ah, content a bit more ...

Complex methods:

First step: Register GitHub and create a warehouse

1. Register with your own e-mail

Note: The user name is suggested in lowercase, and the reason is mentioned later.

2. Create a new warehouse

After logging in, click on the right button

Then the following content appears

The first is the name of the warehouse to be created. Name can not be random, need to write: user name. Github.io. If my user name is Gioiaup, then the warehouse name here will need to fill in Gioiaup.github.io.

The second one indicates whether a Readme file needs to be created, and the individual thinks it is possible to do so, because there is a theme template in the search.

After creation

The URL shown here, the remote address of the current repository, can be used for clone or push.

This is where GitHub's work is ready to complete 90%. The SSH public key is not configured and is mentioned later.

Second Step: Installing Jekyll

1. Download and install Git

When the installation is complete, the right mouse button has both options.

2. Install Ruby

This is the download link:https://rubyinstaller.org/downloads/

Due to the need to install Ruby and Devkit, I downloaded the official recommended two composite one installation package,

My computer is 64-bit, the first one to choose.

At the time of installation, the next step after accepting the terms

Select a file folder to put Ruby. I think I can utf-8 this option, although I do not know what is the use, but feel utf-8 and Chinese have links, must look.

Next, you will see the following options:

Remember to put that MSYS2 hook , or there will be a lot of problems in the back, so you first install this MSYS2. Alas, a pit.

If there is a block installation when the installation of the situation remember to allow ...

After the installation, it will automatically tick, click Finish, then automatically pop up the DOS window and let you choose

I chose the 1, the second option should be the same effect bar ...

In the end it will remind you that the installation was successful and then click Enter.

3. Install the Jekyll.

Open dos, enter gem install Jekyll, and start installing Jekyll.

Wait a minute, there'll be a bunch of things like this.

This means that Jekyll is installing

After installing Jekyll, enter jekyll-vin DOS, if the version number appears, Jekyll installation is successful.

4. Find your favorite theme

Jekyll Theme Template Download: http://jekyllthemes.org

This is part of the theme, choose a theme you like. For example, choose the first one, enter. At this point, you have three choices.

a) If you choose Homepage, you go to the GitHub home page of the topic, and the page has a clone green button with a URL address that can be used to clone all the files of that subject

Cloning method: In the folder where you need to put the blog, right-click Git bash here, and then the $ symbol, enter git clone url（这个url是上面那个主题clone显示的url地址，可以copy之后在git里右键paste粘贴），

Once the clone is complete, you will see all the files of the selected theme in the current folder.

This is the cloning success. Of course, if you choose download on the subject, you don't have to clone it.

b) download, needless to say. Unzip it directly into the desired folder.

　　c) The choice of fork is the simplest way. The following will introduce

5. Install Bundles

Inside DOS, enter the gem install Bundler

The appearance of this is even installed.

Then go to clone or download the file of the blog, right-click Git bash here, enter bundle install, install bundle again. I don't understand why.

Similar to this.

If you do not install bundles, execute in git: Bundle exec Jekyll s will error. Another pit ...

6. Modify the configuration file

After cloning or downloading, the various required files are installed after the installation is complete. Modify the configuration in the _config.yml. such as the current path to these files.

If I create a new test file, and then in this file using Git clone a favorite theme, the theme is the name of the blog, then the test \ Blog is the subject of all the files. At this time need to change the path of the file to "/blog", note is "/", not "\",/blog the path in front of no matter!!! Of course, you can not create a new folder directly on the desktop clone

7 . Local preview

After the configuration is complete, right-click the folder in the current theme, Git bash here, and enter bundle exec Jekyll s here S is the shorthand for serve. Then you can be in the localhost:4000/blog/(notice the "/" Behind the blog can not be omitted, otherwise not shown) or 127.0.0.1:4000/blog/on the preview of their own topic blog. If there is a 404 page problem, the path is not configured correctly.

Is the page that appears after the URL configuration is successful. If you modify the configuration, you need to re-execute the bundle EXEC Jekyll S.

8 . Configuring the SSH public key

You want to implement direct access to the user name. Github.io the blog theme of his choice, and it's going to take this step.

The reason for setting up SSH keys is to have git get push permissions so that you don't have to enter a password every time you pull or push. If the push commits the code, the permission denied (publickey) permission is not allowed, and SSH is not configured to cause the problem.

In Git bash here, enter ssh-keygen-t rsa-b 4096-c "[email protected]" in the quotation marks of the mailbox you signed up for GitHub.

The following will let you lose the password, you can directly press ENTER not set on the line.

Then there will be your SSH plaintext. It is stored in the C:\Users\Administrator\.ssh.

Then you can open it in git or in Notepad to see your SSH public key

Git looks in the way input: Cat ~/.ssh/id_rsa.pub.

9. Set the SSH public key in GitHub

Avatar---setting SSH and GPG keys-->new ssh Key--

Copy the contents of the id_rsa.pub into the key, and then take a name. Click on Add SSH key, and then every few seconds GitHub will send you an email, as follows:

The description was added successfully.

then enter ssh-t [email protected] in git and the following content appears

The SSH settings are successful, so you can push the local file to GitHub.

10. Local file push to GitHub designated warehouse

At this point, you can enter Git status in git to see if the file has been modified, and if so, it will appear

At this point, enter: Git Add. (Note that there is a point here), first add the modified file, then enter the git status, the red files are turned green.

Then enter git commit-m "content" refers to the description of the submission, each time the file is submitted with a submission instructions, in order to clearly understand what changes have been made.

Check git status again at this time

The instructions can be submitted.

Last input: git push url (this URL is the URL of the repository you created)

Then wait for it to upload slowly ...

This succeeds, and then refreshes on the warehouse page. On the upload.

This is the last step. Modify the URL of the _config.yml again, the last time I modified it for the local preview, this time, the network directly access the user name. Github.io only Modified

Note: At this point, most of the URLs need to be modified to setting in the GitHub Pages of the address, such as my theme I changed to: BaseURL: "https://isunbeam.github.io/", some blog topics directly without filling, that is, BaseURL: "On the line."

Then wait until the background of that address in GitHub Pages turns green, even if it was successfully modified.

This will make a successful visit.

Simple way:

Instead of having to install a variety of files, just have a github account, then go to the GitHub page on the Jekyll topic that needs to fork, then click Fork on that page and it will automatically create a repository in your GitHub, You need to get into the setting of your fork's warehouse.

1. Modify the name of the current warehouse:

Note: once again, if my GitHub user name is Gioiaup, then the name of the repository must be Gioiaup.github.io, which is the user name. GitHub Io.

reminder: The username is recommended in lowercase because there is a user, Organization, and Project Pages feature, while domain domain names are case-insensitive and the default is lowercase. My first user name is the hump, so the warehouse name is also the way the hump, the results of the blog when the building, the page shows that I can not find a variety of files, a look is the configuration file in the URL of the capitalization automatically changed to lowercase ... Keng

When you click Rename, if you successfully publish the page, then GitHub will send you an e-mail, similar (here I have changed the user name to Isunbeam, so sent over the message shows the Isunbeam.github.io, the following will refer to how to change the user name)

When the message comes in, you can see the following message in the GitHub pages option in setting, which indicates that the blog was published successfully.

At this point, you can click on the link and the topic page will appear. But... CSS and JS paths are not correct, so you also need to modify the _config.yml file under the theme file 2. Modify the theme Blog configuration URL fileAfter entering the _config.yml file, click on the Pencil icon on the right to enter the editor.

In the theme I chose, configure the URL in line 43, and then modify the file below 43 lines at BaseURL,

After modification:

Click on the button to complete the modification, this time, only to wait until GitHub sent you an e-mail, it means that the changes were successful. You will be able to access the user name normally. Github.io.

If the CSS or JS file is still not found, you look at the console error path, and then modify the BaseURL on the line. Most of the BaseURL are user names. Github.io, but some do not fill the blanks to be correct.

Once these configurations are complete, you will be able to correctly display the content of your fork's theme.

Modification of User name:

In the account in this setting.

After the modification, if the following conditions occur

Indicates that the user name is occupied, and if the following appears, the modification succeeds

Call...... Finally finished. Although the construction of the road bumps, but eventually got out.

Right, after the success of the blog, modified to their own want is very simple, you can modify the local push, can also be modified on GitHub. After the change, wait a while until the address on GitHub pages is green and the effect is changed.

Learned a lot of fried chicken knowledge, or very happy. O (∩_∩) o haha ~

Build your own blog using GitHub pages+jekyll (Windows edition)