基于jekyll在GitHub_Pages上搭建网站.md

2020-08-06 本文已影响0人 zhf_sy

Github Pages ： https://docs.github.com/en/github/working-with-github-pages/getting-started-with-github-pages
Jekyll ：是一个静态网站生成器。用你喜欢的标记语言书写内容并交给 Jekyll 处理，它将利用模板为你创建一个静态网站。你可以调整你想要的网址样式、在网站上显示哪些数据等等，主页：https://www.jekyll.com.cn/

[TOC]

jekyll安装

Jekyll 是一个可以安装到大部分操作系统上的 Ruby Gem 组件。

安装先决条件:

参考：https://www.jekyll.com.cn/docs/installation/#requirements

Ruby 2.4.0 或更高版本，包含所有用于开发的头文件（可通过执行 ruby -v 指令检查 ruby 版本）
RubyGems （可通过执行 gem -v 指令检查版本）
GCC and Make （以防你的系统中没有安装这些工具，请通过执行 gcc -v,g++ -v 和 make -v 指令进行检查）

在ubuntu上安装：

sudo apt install ruby-full build-essential zlib1g-dev
sudo apt install ruby ruby-dev gcc g++ make

设置gem安装路径：

最好避免安装Ruby Gems到root用户，而是安装到个人用户目录下，日入~/gems，方法如下：

# 建立目录：~/gems，设置环境变量及PATH路径：
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

安装jekyll及bundler

gem install jekyll bundler
jekyll -v

官方文档

https://www.jekyll.com.cn/docs/
https://www.jekyll.com.cn/docs/usage/
建议阅读，至少快速阅读下

github设置

简单理解：jekyll是一个静态网站生成器，他可以自动将markdown文件生成为静态网页，比如1.md-->1.html，github pages使用jekyll工具自动将仓库中的markdown文件转换成静态网页

创建github仓库，仓库的名字必须为你的github用户名.github.io（这样才能开启GitHub Pages博客功能）
测试github pages博客是否可用：提交一个index.html到项目根目录，用刘拉你打开网站试试https://你的github用户名.github.io
如果你放一个1.md文件在根目录，你会发现可以访问https://你的github用户名.github.io/1.html
设置别名域为自己的域名，提高逼格：打开项目仓库-->'settings'-->'GitHub Pages'-->'Custom domain'，如此访问：http://别名域
设置好后会自动在项目根目录生成一个文件'CNAME'，内容像这样：

blog.zzxia.vip

搭建博客方法一

使用github pages上的主题模板搭建博客

设置主题模板

设置github仓库使用的jekyll模板。打开项目仓库-->'settings'-->'GitHub Pages'-->'Theme Chooser'，效果等同如下（例如：jekyll-theme-architect）：
在仓库根目录创建'_config.yml'，并添加行：

theme: jekyll-theme-architect（主题的名字）

在选择模板的页面可以看到模板下载地址，把模板下载或克隆到本地（https://github.com/kevinzu007/kevinzu007.github.io/settings/pages/themes?select=architect&source=master），下载文件中一般有使用说明。
这个呢？：remote_theme: jekyll-theme-architect

本地测试博客网站

一般情况，你需要在本地进行测试，这是你就需要安装jekyll工具了，安装方式参考本文上一节jekyll安装

在项目根目录添加Gemfile文件，内容：

gem "jekyll-theme-architect"

安装gem包

bundle install

或者也可以这样：

gem install  jekyll-theme-architect

在项目根目录运行（开启本地服务）：

jekyll serve
# 或：bundle exec jekyll serve

打开浏览器访问http://localhost:4000，即可看到本地部署的博客了

搭建博客方法二

使用第三方主题模板搭建博客
jekyll模板网站： http://jekyllthemes.org/

挑选喜欢的第三方模板，克隆到本地，进入克隆目录，将相关信息改为自己的，特别是CNAME（如果有），将目录中所有文件全部拷贝到github仓库根目录下，进入github项目根目录，运行：

bundle install
jekyll build
jekyll serve

打开浏览器访问http://localhost:4000 ，即可看到本地部署的博客了。

注意：设置github仓库的.gitignore，排除jekyll测试生成的过程文件，把博客文件push到github上之后，github会自动使用jekyll生成相关页面。

如果一切ok，即可将所有文件提交到仓库了，github pages会自动使用jekyll生成静态页面