使用github pages静态博客

·  阅读 268

创建github.io仓库

有个自己能管理的静态博客还是挺好的,这里介绍的方法是用github pages + jekyll来实现。
根据github pages介绍,设置一个username.github.io的仓库,这一步就已经实现了静态博客,只不过只有一个README页面。

操作过程要注意的是创建仓库时勾选Add a README file并且命名的username必须是github的username,也就是说一个账号只能有一个uername.github.io的仓库。

因为我已经创建过了,所以会提示仓库我已经存在。

安装jekyll

jekyll是一个用Ruby实现的静态页面生成器,用它可以很方便的使用一些别人配置好的静态网页模板,如果不想使用jekyll,也可以自己写代码生成静态页面之后往仓库里放,本文完。

安装jekyll前需要ruby2.4.0或以上版本,RubyGems,GCC, Make。 具体可以参考installation

把username.github.io代码拉到本地,切换到根目录下,这里只有一个README.md
继续安装jekyll和bundler

gem install jekyll bundler
复制代码

执行bundle init,会多一个gemfile文件
配置bundler的安装目录,这一步是可选操作

bundle config set --local path 'vendor/bundle'
复制代码

添加jekyll bundle add jekyll
创建jekyll脚手架

bundle exec jekyll new --force --skip-bundle .
bundle install
复制代码

启动服务bundle exec jekyll serve,打开浏览器访问 http://127.0.0.1:4000,就可以看到jekyll默认使用的模板了。默认使用minima主题。

参考Using Jekyll with Bundler

写文章

使用的主题不同,文章存放的文件夹会不一样,这里使用的是minima,文章放在_posts文件夹里,命名规则是YYYY-MM-DD-post-name.md。 文章顶部需要加一些字段,例如:

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

复制代码

jekyll会读取这些字段,生成一些有用的信息。title要唯一。
在本地编辑文章,jekyll会自动生成静态文件,完成后push到仓库即可。

配置jekyll

基本配置在_config.yml文件中。这里可以配置title,email等等信息,自动生成在header,footer相关内容里。

增加导航

如果需要配置导航栏可以增加header_pages字段

header_pages:
  - about.md
  - help.md
复制代码
---
layout: page
title: About
permalink: /about/
---
### about
this is about
复制代码

about.mdhelp.md要放在根目录下,不要放在_posts里。

自定义layout

如果需要更多自定义,可以继续参考github jekyll/minama。比如我要把header固定,就创建一个_includes文件夹,增加header.html,把header.html的源码copy下来,再进行自己的二次创作,jekyll会优先使用本地的header.html文件。

编辑_includes/header.html,增加style属性

<header class="site-header" style="position: fixed; width: 100%; background: white">
复制代码

新增_layouts文件夹,新增default.html,给main元素增加一个margin-top: 56px;的样式

<!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>

复制代码

同时我把footer去掉了,我不要这部分。我还使用了home.html,默认的home有个posts文案,用源码copy过来的就没有。整个页面很极简,这是我要的风格。jekyll有很多漂亮的主题可自己挑选使用。有的主题甚至直接fork过来,改个名字就可以用了(改为自己的username.github.io)。

更多主题
github上的主题

发布

commit之后push到代码仓库,直接访问github给你的地址。如果要使用自己的域名,在settings--GitHub Pages -- Custom domain里添加上自己的域名,如果域名配置了ssl证书还可以开启Enforce HTTPS 然后在DNS解析里添加一条记录,记录类型为CNAME,记录值是username.github.io

后续

  • 图床配合markdown使用更优雅
分类:
阅读
标签: