Create the github. IO repository

Github Pages + Jekyll is a good way to have a static blog that you can manage.

According to thegithub pagesGithub. IO repository. This step has already implemented static blog, but only oneREADMEPage.

Note that this is checked when creating the warehouseAdd a README fileGithub username must be github username, that is, an account can only have one repository uername.github.

Because I’ve already created it, the repository will be prompted that I already exist.

Install jekyll

Jekyll is a static page generator with Ruby, it can be very convenient to use some other people configured static page template, if you do not want to use Jekyll, you can also write code to generate static pages to put in the warehouse, the end of this article.

Before installing jekyll, you need ruby2.4.0 or later, RubyGems, GCC, Make. For details, see Installation

Pull the username.github. IO code to the local directory and switch to the root directory, where there is only readme. md to continue installing Jekyll and Bundler

gem install jekyll bundler
Copy the code

Optionally, a Gemfile file is added to the bundler installation directory by executing the bundle init

bundle config set --local path 'vendor/bundle'
Copy the code

Add jekyll bundle add Jekyll scaffolding

bundle exec jekyll new --force --skip-bundle .
bundle install
Copy the code

Start the service bundle exec Jekyll Serve, open a browser and visit http://127.0.0.1:4000 to see the template jekyll uses by default. The minima theme is used by default.

See Using Jekyll with Bundler

Write an article

Minima is used. Posts are stored in the _posts folder named YYYY-MM-DD-post-name.md. Some fields need to be added at the top of the article, for example:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2021-02-01 10:43:01 +0800
categories: jekyll update
---

Copy the code

Jekyll reads these fields to generate some useful information. Title needs to be unique. When you edit articles locally, Jekyll automatically generates static files that are pushed to the repository.

Configuration jekyll

The basic configuration is in _config.yml. You can configure the title, email, etc., automatically generated in the header, footer related content.

Increase the navigation

If you need to configure the navigation bar, add the header_Pages field

header_pages:
  - about.md
  - help.md
Copy the code
---
layout: page
title: About
permalink: /about/
---
### about
this is about
Copy the code

About. Md and help.md should be in the root directory, not _posts.

A custom layout

For more customizations, go to Github Jekyll/Minama. For example, if I want to fix the header, I will create a _includes folder, add header. HTML, copy the source code of header. HTML, and then make my own second creation.

Edit _includes/header. HTML to add the style attribute

<header class="site-header" style="position: fixed; width: 100%; background: white">
Copy the code

New _layouts folder, default. HTML, and a margin-top: 56px for the main element; The style of the

<! DOCTYPE html> <html lang="{{ page.lang | default: site.lang | default: "en" }}"> {%- include head.html -%} <body> {%- include header.html -%} <main class="page-content" aria-label="Content" style="margin-top: 56px;" > <div class="wrapper"> {{ content }} </div> </main> <! -- {%- include footer.html -%} --> </body> </html>Copy the code

I also removed the footer, I don’t want that part. I also used ithome.html, the default home has apostsCopy, with the source copy over there is no. The whole page is very minimalist, which is my style. Jekyll has plenty of beautiful themes to choose from. Some themes can even be forked and renamed (username.github. IO).

More topics Topics on Github

release

After commit, push to the repository and access the address github gave you. If you want to use your own domain name, insettings--GitHub Pages -- Custom domainAdd your own domain name, if the domain name is configured with SSL certificate can also be openedEnforce HTTPS 。 Then add a record of type CNAME and value CNAME to DNS resolutionusername.github.io

subsequent

  • Drawing bed is more elegant to use with Markdown