Elon's Blog

文章

Eleventy Blog On GitHub Page

2021-01-22

索引

主题参考

参照 Randy's blog 的主题

Randy's Blog

djyde/blog-2020

注意事项

把整个github的项目下载下来，执行以下命令后就可以启动了

yarn

yarn dev

yarn build:css # build css files

yarn build # build the whole project

修改自己的个人信息，去除不必要的功能页，上传到自己的Github Page

发文新建的markdown文件，文章信息部分需要严格遵守格式

---
title: XXXXXXX
layout: blog.njk
date: XXXX-XX-XX
tags: blog (这里必须是blog)
categories:
  - XXX（这里可以修改）
---

添加自定义域名

在项目根目录下新建CNAME文件，文件填写

your-domain.com

编辑 .eleventy.js 文件，添加如下

// 表示在编译时，把`CNAME`文件加进去，
module.exports = function(eleventyConfig) {
  ...
  eleventyConfig.addPassthroughCopy("CNAME");
  ...
}

添加Github Action

项目根目录下添加

.github/workflows/build.yml

build.yml 文件内容如下

name: Build Eleventy

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-20.04

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js $
        uses: actions/setup-node@v1
        with:
          node-version: $

      - name: Install dependencies & build
        run: |
          npm i
          npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          publish_dir: ./_site
          github_token: $

这样项目每次push到Github后，Github会识别到build.yml，会自动构建发布网站，发布成功后，会在Github的项目下新建分支gh-pages，也就是会把_site里的内容，发布到gh-pages分支里

最后我们需要在 GitHub blog项目-Settings-GitHub Pages-Source-Branch设置为gh-pages

参考链接