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,即可看到网页内容已经刷新。