如何在Github上安装自己的博客

1. 创建Github仓库

Github是一款以Git为基础的代码托管平台,在Github上托管自己的博客需要创建一个仓库。以下是如何创建一个Github仓库的步骤:

1.1. 登录Github

如果没有Github账号,需要先注册。如果已有Github账户,登录Github官网 https://github.com/

1.2. 创建仓库

登录Github后,在页面右上角点击“+”菜单,选择“New repository”。

// 点击“+”菜单后,出现如下页面

Repository name: my-blog

Description (optional): This is my personal blog.

Public or Private: Public

Initialize this repository with a README: 选中该选项,用于初始化仓库

gitignore: leave it as None

license: leave it as None

点击Create repository按钮

完成以上步骤,就创建了一个名为“my-blog”的仓库,并且已经将README.md文件创建好了。

2. 使用Jekyll创建博客

Jekyll是一个简单的静态博客生成器,可以将Markdown文件转换成静态HTML页面。Jekyll是Github官方推荐的静态网站生成器,整合了Github Pages,可以将Jekyll博客托管在Github上。

2.1. 在本地安装Jekyll

在本地安装Jekyll,需要安装Ruby和RubyGems。在命令行终端下执行以下命令:

// 安装RubyGems

$ sudo apt-get install rubygems

// 安装Jekyll

$ sudo gem install jekyll

安装完毕后,可以使用以下命令验证Jekyll是否安装成功:

$ jekyll -v

// 输出类似以下内容

jekyll 4.2.0

2.2. 创建博客

在本地创建一个名为“my-blog”的目录,并在该目录下创建一个Jekyll博客:

// 创建my-blog目录

$ mkdir my-blog

// 进入my-blog目录

$ cd my-blog

// 使用jekyll new命令创建Jekyll博客

$ jekyll new . --force

执行完毕后,my-blog目录下就会生成一些文件和目录,以下是部分目录和文件的作用:

_config.yml:Jekyll的主配置文件

_layouts/:博客样式文件夹

_posts/:存放文章的文件夹

index.html:博客首页

2.3. 修改配置文件

打开_config.yml文件,修改site的参数值为“my-blog”:site: my-blog。

2.4. 本地运行博客

本地运行博客,使用以下命令:

$ jekyll serve

执行完毕后,Jekyll会自动编译博客,并在本地启动一个服务器,可以在浏览器中访问http://localhost:4000预览博客。

3. 将博客托管到Github Pages

Github提供了免费的Github Pages服务,可以将静态网页托管到Github上。将Jekyll博客托管到Github Pages,需要执行以下步骤:

3.1. 创建gh-pages分支

在本地打开my-blog目录,切换到master分支:git checkout master。使用以下命令在该分支下创建gh-pages分支:

$ git checkout -b gh-pages

该分支用于托管博客静态网页。

3.2. 将博客推送到gh-pages分支

使用以下命令将my-blog目录下的所有文件推送到gh-pages分支:

$ git add .

$ git commit -m "Initial commit"

$ git push -u origin gh-pages

3.3. 在Github上配置Pages服务

打开Github官网,在my-blog仓库的Settings页面中,找到Github Pages选项卡,选择gh-pages分支,并设置Source为“gh-pages branch”。

完成以上步骤,打开浏览器,访问https://[Github账号名].github.io/my-blog/,就可以查看已经托管在Github Pages上的博客。

3.4. 修改博客内容并推送到Github

修改Jekyll博客内容,可以在本地修改后再推送到Github上。使用以下命令提交修改后的代码:

$ git add .

$ git commit -m "update blog content"

$ git push -u origin gh-pages

完成以上步骤后,打开存放博客网页的url,即可看到网页内容已经刷新。