likes
comments
collection
share

使用github pages静态博客

作者站长头像
站长
· 阅读数 23

创建github.io仓库

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

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

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

安装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.md和help.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 pages静态博客

更多主题 github上的主题

发布

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

后续

  • 图床配合markdown使用更优雅
转载自:https://juejin.cn/post/6925677496830525454
评论
请登录