Build jekyll + Github Pages blog

Personal blog: https://withlei.github.io/

Operating System: Windows10

What is the Jekyll

Quote from the official website:
Jekyll is a simple static site blog forms of production machines. It has a template directory that contains the document original text format, and our Liquid renderer converted into a static website a complete publishable by a converter (such as Markdown), you can publish on any of your favorite server. Jekyll can also run on GitHub Page, that is, you can use the service to build your GitHub project page, blog or website, and is completely free.

In simple terms, Jekyll is pure static text into a blog site without database support, there is no comment function, you want to comment function, then you can use third-party review service.
Jekyll + Github Pages allows you to focus more on blog content, not how to build a blog platform.

What is Github Pages

GitHub Pages is a static web hosting services, hosting github repository directly from your personal, company or project page, and you do not need to write any backend language support.

Github Pages service is free, but there are some limitations:

Warehouse space is not more than 1G
traffic per month does not exceed 100G
per hour update of no more than 10 times

But these restrictions certainly did not affect us ordinary people, it can be ignored.
Here are just a Github Pages as a platform for additional details can Github Pages document View

Jekyll begin installation

Before installation Jekyll, has been pressed to confirm the installation step

  1. Install Ruby + DevKit
  2. Installation Jekyll

1. Install Ruby + DevKit

Download: https://rubyinstaller.org/downloads/

16471224-7d3e318e4338d6d5
Here Insert Picture Description

Version with direct selection of DevKit

After the installation is complete, check whether the installation was successful ruby

ruby -v
gem -v //查看gem 是否正常安装
16471224-b94979474b829344.png
Here Insert Picture Description

16471224-1721662f58458d0b.png
Here Insert Picture Description

2. Install Jekyll

gem install jekyll

Quick start
after the installation of a Jekyll Gem package, you can use the Jekyll command in the command line. Official website provides an example of a fast start:

# 安装bundler,bundler通过gemfile文件来管理gem包
gem install  bundler

# 创建一个新的Jekyll项目,并命名为myblog
jekyll new myblog

# 进入myblog目录
cd myblog

# 在Jekyll自带的服务器上预览你的项目,默认的运行地址为http://localhost:4000
# bundle exec 表示在当前项目依赖的上下文环境中执行命令 jekyll serve
bundle exec jekyll serve

Jekyll comes with a development server, allows you to use the browser to preview locally.

jekyll serve
# 开发服务器将会运行在 http://localhost:4000/

serve command will automatically monitor changes, generate a new file. Want to turn off this feature, you can use jekyll serve --no-watch, here are a few other parameters:

  • jekyll serve --livereload the equivalent of front-end development of auto-refresh browser.
  • jekyll serve --incremental heat equivalent replacement module, the module only refreshing change.
  • jekyll serve --detach and jekyll serve the same command, but will run in the background from the terminal, if you want to shut down the server, you can use the command kill -9 1234, "1234" is the process ID (PID). If you can not find the process ID, then use ps aux | grep jekyll command to view, and then shut down the server.

Access test link: http: //127.0.0.1: 4000 /
appear on this page instructions to create a successful deployment


16471224-e4eda3fddb949cd9
Here Insert Picture Description

He began to build Github Pages

1. Jekyll wrote Bowen

You may like markdown or html to write blog posts can be, but naming Bowen file to obey the following rules:

 year-month-title.markup //markup为你的文件格式的后缀名

Add yaml header information in your article head

---
layout: post
title:  "Jekyll+Github搭建个人博客"
date:   2019-06-05
categories: original
---

Write their own blog content, this file will be saved in the blog Inside _posts directory can be. Jekyll built-in server restart, refresh the page: HTTP: // localhost: 4000 , if not, you can enter:

jekyll build 

重新生成页面,在启动服务器,这样就可以在页面看到自己添加的博文的标题了。
这就是在本地搭建jekyll和写博文的大致过程了,相信还有其他的搭建方法,但是估计都是大同小异吧。

2.部署到Github Pages

这里有两种方法:

  1. 使用命令完成
  2. 使用GitHub desktop应用完成

1)使用命令操作

接下来的操作都是用GIT命令完成的,不再是cmd了。首先,大家应该都拥有了github账号,没有的注册一个就好了。

  • 创建个人仓库
    就是建立一个新的仓库,但是这个仓库的名字必须为你的github的名字+github+io,即yourname.github.io
  • 将目录切换到你想要放github博客的文件目录下,在这个目录git bash 将刚才建的仓库克隆下来:
  git clone [email protected]:yourname/yourname.github.io.git

这时,你会发现你的文件夹下会多出一个yourname的文件,我们把之前的blog下的所有文件复制到里面。

  • 然后把里面的所有文件push到刚刚建的远程仓库,步骤我就不写了。
    这时,在浏览器里面输入网址:http://yourname.github.io 就可以看你的个人博客网站了,这就是你的博客网站的地址了。
    前面所说的yourname指的是你的github账号名字。
  • 嗯,接下来你就可以查看你的博客网站了。其中还可以在github的settings中选择你的博客主题。

2)使用GitHub desktop应用

将本地博客使用desktop上传仓库,仓库名为 yourname.github.io ,接着同步后就可以访问了

Reference blog:
Jekyll installation procedures and problem windows - Peng Shiyu
Jekyll Chinese official website
Jekll + Github Pages set up a static blog
Jekyll build personal blog - Pan Boxin

Reproduced in: https: //www.jianshu.com/p/8ac7315866ff

Guess you like

Origin blog.csdn.net/weixin_34163741/article/details/91059918