From 6be7a6c4e8833b0a7dac78ff0ee6200c4b08c020 Mon Sep 17 00:00:00 2001 From: poneding Date: Thu, 13 Jun 2024 11:07:58 +0800 Subject: [PATCH] add build-blog-site.md --- .github/workflows/deploy.yml | 39 ---- content/_index.md | 2 +- content/front-end/_index.md | 2 +- content/front-end/build-blog-site.md | 245 +++++++++++++++++++++ content/front-end/build-site-seo-config.md | 10 - content/front-end/pinia.md | 2 +- hugo.yaml | 5 +- static/BingSiteAuth.xml | 4 + static/CNAME | 1 + static/baidu_verify_codeva-TIM45BA2zX.html | 1 + static/css/syntax.css | 122 +++++----- static/google19b14a3a19b00214.html | 1 + test.yaml | 1 + 13 files changed, 320 insertions(+), 115 deletions(-) create mode 100644 content/front-end/build-blog-site.md delete mode 100644 content/front-end/build-site-seo-config.md create mode 100644 static/BingSiteAuth.xml create mode 100644 static/CNAME create mode 100644 static/baidu_verify_codeva-TIM45BA2zX.html create mode 100644 static/google19b14a3a19b00214.html create mode 100644 test.yaml diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index fbf3bc14..e69de29b 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,39 +0,0 @@ -name: Deploy - -on: - push: - branches: - - master # Set a branch to deploy - workflow_dispatch: - schedule: - # Runs everyday at 8:00 AM - - cron: "0 0 * * *" - - pull_request: - -jobs: - deploy: - runs-on: ubuntu-22.04 - concurrency: - group: ${{ github.workflow }}-${{ github.ref }} - steps: - - uses: actions/checkout@v4 - with: - submodules: true # Fetch Hugo themes (true OR recursive) - fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod - - - name: Setup Hugo - uses: peaceiris/actions-hugo@v3 - with: - hugo-version: '0.127.0' - # extended: true - - - name: Build - run: hugo --minify - - - name: Deploy - uses: peaceiris/actions-gh-pages@v3 - if: github.ref == 'refs/heads/master' - with: - github_token: ${{ secrets.GH_TOKEN }} - publish_dir: ./public \ No newline at end of file diff --git a/content/_index.md b/content/_index.md index a6e47325..6b012eca 100644 --- a/content/_index.md +++ b/content/_index.md @@ -77,7 +77,7 @@ ## 前端技术 -- [SEO](front-end/build-site-seo-config.md) +- [搭建博客站点](front-end/build-blog-site.md) - [Pinia 入门](front-end/pinia.md) - [VitePress](front-end/vitepress.md) - [认识Vue3](front-end/vue3.md) diff --git a/content/front-end/_index.md b/content/front-end/_index.md index 1c225c3b..ad27ee77 100644 --- a/content/front-end/_index.md +++ b/content/front-end/_index.md @@ -2,7 +2,7 @@ # 前端技术 -[SEO](build-site-seo-config.md) +[搭建博客站点](build-blog-site.md) [Pinia 入门](pinia.md) diff --git a/content/front-end/build-blog-site.md b/content/front-end/build-blog-site.md new file mode 100644 index 00000000..3a86cdd3 --- /dev/null +++ b/content/front-end/build-blog-site.md @@ -0,0 +1,245 @@ +[我的博客](../_index.md) / [前端技术](_index.md) / 搭建博客站点 + +# 搭建博客站点 + +## 1. Hugo 搭建博客 + +Hugo 是一个用 Go 语言编写的静态网站生成器。Hugo 的速度非常快，因为它是一个独立的二进制文件，不需要任何运行时依赖。Hugo 的主要特点是速度快、易于安装、易于使用、易于定制。 + +### 1.1 安装 Hugo + +参考：[https://gohugo.io/installation](https://gohugo.io/installation) + +### 1.2 创建博客 + +```bash +hugo new site blog --format yaml +cd blog +git init +``` + +### 1.3 选择主题 + +使用 `hugo-book` 主题。 + +```bash +git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book +``` + +## 2. 定制 + +### 2.1 配置 hugo.yaml + +```yaml +# hugo server --minify --themesDir ../.. --baseURL=http://0.0.0.0:1313/theme/hugo-book/ + +baseURL: https://blog.poneding.com/ +title: 我的博客 +theme: hugo-book +pluralizeListTitles: false +defaultContentLanguage: cn + +# Book configuration +disablePathToLower: true +enableGitInfo: true + +# Needed for mermaid/katex shortcodes +markup: + tableOfContents: + startLevel: 2 + endLevel: 3 + # ordered: true + + highlight: + noClasses: false + # style: monokai + +menu: + main: + - name: "首页" + url: "/" + weight: 10 + - name: "归档" + url: "/posts/" + weight: 20 + - name: "标签" + url: "/tags/" + weight: 30 + - name: "关于" + url: "/about/" + weight: 40 + after: + - name: "Github" + url: "https://github.com/poneding" + weight: 10 + +params: + BookTheme: "auto" + BookToC: true + BookFavicon: logo.png + BookLogo: logo.png + BookSection: "none" + BookRepo: https://github.com/poneding/blog + BookCommitPath: commit + BookEditPath: edit/master + BookDateFormat: "2006/01/02" + BookSearch: true + BookComments: true + BookPortableLinks: true + BookServiceWorker: true + BookTranslatedOnly: false +``` + +要注意的几个配置点： + +- `params.BookSection`: 本身指定一个 content 下的文档目录，我们这里设置一个不存在的目录，是为了不在左侧菜单栏展示我们的 N 多的目录树； +- `markup.highlight.noClasses`: 本身用来确认是否不使用自定义的 CSS 样式，我们这里设置为 `false`，因为我们需要使用自定义的 chorma 的代码高亮样式，跟随浏览器或系统自动切换代码高亮主题； + +### 2.2 配置 giscus 评论 + +拷贝 `hugo-book` 的 `layouts/_default/baseof.html` 文件到 `layouts/_default/baseof.html`，命令操作如下： + +```bash +mkdir -p layouts/_default +cp themes/hugo-book/layouts/_default/baseof.html layouts/_default/baseof.html +``` + +通过配置 giscus 获取 js 脚本代码，参考：[https://giscus.app](https://giscus.app/zh-CN) + +获取到的 js 脚本代码，在 `layouts/_default/baseof.html` 文件找到 `{{- partial "docs/comments" . -}}` 所在行，在其下一行添加 js 脚本代码，最终代码如下： + +```html +... +
+ {{- partial "docs/comments" . -}} + + + +
+... +``` + +### 2.3 代码主题自动切换 + +```bash +mkdir -p static/css + +# light +echo "@media (prefers-color-scheme: light) {" > static/css/syntax.css +hugo gen chromastyles --style=monokailight >> static/css/syntax.css +echo "}" >> static/css/syntax.css + +# dark +echo "@media (prefers-color-scheme: dark) {" > static/css/syntax.css +hugo gen chromastyles --style=monokaidark >> static/css/syntax.css +echo "}" >> static/css/syntax.css +``` + +### 2.4 Logo + +将 logo.png 图片放到 `static` 目录下。 + +## 3. 部署 + +### 3.1 自定义域名 + +我们已经在 `hugo.yaml` 中配置了 `baseURL: https://blog.poneding.com/`，我们还要创建一个 `CNAME` 文件，内容为 `blog.poneding.com`，然后将该文件放到 `static` 目录下。 + +```bash +echo "blog.poneding.com" > static/CNAME +``` + +### 3.2 使用 GitHub Actions 自动部署 + +前提： + +- 在 GitHub 上创建一个新的仓库，例如：`poneding/blog`； +- 配置 GitHub 仓库的 `Settings` -> `Secrets`：`GH_TOKEN`，值为 GitHub 个人访问令牌； + +```bash +mkdir -p .github/workflows +vim .github/workflows/deploy.yml +``` + +`deploy.yml` 文件内容如下： + +```yaml +name: Deploy + +on: + push: + branches: + - master # Set a branch to deploy + workflow_dispatch: + schedule: + # Runs everyday at 8:00 AM + - cron: "0 0 * * *" + + pull_request: + +jobs: + deploy: + runs-on: ubuntu-22.04 + concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + steps: + - uses: actions/checkout@v4 + with: + submodules: true # Fetch Hugo themes (true OR recursive) + fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v3 + with: + hugo-version: '0.127.0' + # extended: true + + - name: Build + run: hugo --minify + + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + if: github.ref == 'refs/heads/master' + with: + github_token: ${{ secrets.GH_TOKEN }} + publish_dir: ./public +``` + +### 3.3 代码提交触发部署 + +```bash +git add . +git commit -m "init repo" +git remote add origin git@github.com:poneding/blog.git +git push -u origin master +``` + +### 3.4 GitHub Pages 配置 + +在 GitHub 仓库的 `Settings` -> `Pages` 中配置 `Source` 为 `Deploy from a branch`, `Branch` 为 `gh-pages` 分支，`root` 为 `/`。 + +## 4. SEO 配置 + +参考： + +- [Google](https://search.google.com/search-console) +- [百度](https://ziyuan.baidu.com/dashboard/index) +- [Bing](https://www.bing.com/webmasters/) + +--- +[» Pinia 入门](pinia.md) diff --git a/content/front-end/build-site-seo-config.md b/content/front-end/build-site-seo-config.md deleted file mode 100644 index 6f2ef4d5..00000000 --- a/content/front-end/build-site-seo-config.md +++ /dev/null @@ -1,10 +0,0 @@ -[我的博客](../_index.md) / [前端技术](_index.md) / SEO - -# SEO - -- [Google](https://search.google.com/search-console) -- [百度](https://ziyuan.baidu.com/dashboard/index) -- [Bing](https://www.bing.com/webmasters/) - ---- -[» Pinia 入门](pinia.md) diff --git a/content/front-end/pinia.md b/content/front-end/pinia.md index 2b8f252b..b99aa8d2 100644 --- a/content/front-end/pinia.md +++ b/content/front-end/pinia.md @@ -165,6 +165,6 @@ export const useCounterStore = defineStore('counter', ()=>{ ``` --- -[« SEO](build-site-seo-config.md) +[« 搭建博客站点](build-blog-site.md) [» VitePress](vitepress.md) diff --git a/hugo.yaml b/hugo.yaml index 9dcfa1a5..7472cac1 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -17,8 +17,9 @@ markup: endLevel: 3 # ordered: true - # highlight: - # style: monokai + highlight: + noClasses: false + # style: monokai menu: main: diff --git a/static/BingSiteAuth.xml b/static/BingSiteAuth.xml new file mode 100644 index 00000000..1216a895 --- /dev/null +++ b/static/BingSiteAuth.xml @@ -0,0 +1,4 @@ + + + A6DA701A68DFFC170A595897CB4DF119 + \ No newline at end of file diff --git a/static/CNAME b/static/CNAME new file mode 100644 index 00000000..63bf7749 --- /dev/null +++ b/static/CNAME @@ -0,0 +1 @@ +blog.poneding.com \ No newline at end of file diff --git a/static/baidu_verify_codeva-TIM45BA2zX.html b/static/baidu_verify_codeva-TIM45BA2zX.html new file mode 100644 index 00000000..58c3706b --- /dev/null +++ b/static/baidu_verify_codeva-TIM45BA2zX.html @@ -0,0 +1 @@ +b7967bcfaa83cbcb8f42f4618df5b534 diff --git a/static/css/syntax.css b/static/css/syntax.css index 665f6ea8..45d9090d 100644 --- a/static/css/syntax.css +++ b/static/css/syntax.css @@ -1,88 +1,88 @@ @media (prefers-color-scheme: dark) { - /* Background */ .bg { color:#f8f8f2;background-color:#272822; } -/* PreWrapper */ .chroma { color:#f8f8f2;background-color:#272822; } +/* Background */ .bg { color:#e5e5e5;background-color:#000; } +/* PreWrapper */ .chroma { color:#e5e5e5;background-color:#000; } /* Other */ .chroma .x { } -/* Error */ .chroma .err { color:#960050;background-color:#1e0010 } +/* Error */ .chroma .err { color:#f00 } /* CodeLine */ .chroma .cl { } /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } -/* LineHighlight */ .chroma .hl { background-color:#3c3d38 } -/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } -/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } +/* LineHighlight */ .chroma .hl { background-color:#191919 } +/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#727272 } +/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#727272 } /* Line */ .chroma .line { display:flex; } -/* Keyword */ .chroma .k { color:#66d9ef } -/* KeywordConstant */ .chroma .kc { color:#66d9ef } -/* KeywordDeclaration */ .chroma .kd { color:#66d9ef } -/* KeywordNamespace */ .chroma .kn { color:#f92672 } -/* KeywordPseudo */ .chroma .kp { color:#66d9ef } -/* KeywordReserved */ .chroma .kr { color:#66d9ef } -/* KeywordType */ .chroma .kt { color:#66d9ef } +/* Keyword */ .chroma .k { color:#fff;font-weight:bold } +/* KeywordConstant */ .chroma .kc { color:#fff;font-weight:bold } +/* KeywordDeclaration */ .chroma .kd { color:#fff;font-weight:bold } +/* KeywordNamespace */ .chroma .kn { color:#fff;font-weight:bold } +/* KeywordPseudo */ .chroma .kp { color:#fff;font-weight:bold } +/* KeywordReserved */ .chroma .kr { color:#fff;font-weight:bold } +/* KeywordType */ .chroma .kt { color:#fff;font-weight:bold } /* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { color:#a6e22e } -/* NameBuiltin */ .chroma .nb { } +/* NameAttribute */ .chroma .na { color:#007f7f } +/* NameBuiltin */ .chroma .nb { color:#fff;font-weight:bold } /* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { color:#a6e22e } -/* NameConstant */ .chroma .no { color:#66d9ef } -/* NameDecorator */ .chroma .nd { color:#a6e22e } +/* NameClass */ .chroma .nc { } +/* NameConstant */ .chroma .no { } +/* NameDecorator */ .chroma .nd { } /* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { color:#a6e22e } -/* NameFunction */ .chroma .nf { color:#a6e22e } +/* NameException */ .chroma .ne { } +/* NameFunction */ .chroma .nf { } /* NameFunctionMagic */ .chroma .fm { } /* NameLabel */ .chroma .nl { } /* NameNamespace */ .chroma .nn { } -/* NameOther */ .chroma .nx { color:#a6e22e } +/* NameOther */ .chroma .nx { } /* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { color:#f92672 } +/* NameTag */ .chroma .nt { font-weight:bold } /* NameVariable */ .chroma .nv { } /* NameVariableClass */ .chroma .vc { } /* NameVariableGlobal */ .chroma .vg { } /* NameVariableInstance */ .chroma .vi { } /* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { color:#ae81ff } -/* LiteralDate */ .chroma .ld { color:#e6db74 } -/* LiteralString */ .chroma .s { color:#e6db74 } -/* LiteralStringAffix */ .chroma .sa { color:#e6db74 } -/* LiteralStringBacktick */ .chroma .sb { color:#e6db74 } -/* LiteralStringChar */ .chroma .sc { color:#e6db74 } -/* LiteralStringDelimiter */ .chroma .dl { color:#e6db74 } -/* LiteralStringDoc */ .chroma .sd { color:#e6db74 } -/* LiteralStringDouble */ .chroma .s2 { color:#e6db74 } -/* LiteralStringEscape */ .chroma .se { color:#ae81ff } -/* LiteralStringHeredoc */ .chroma .sh { color:#e6db74 } -/* LiteralStringInterpol */ .chroma .si { color:#e6db74 } -/* LiteralStringOther */ .chroma .sx { color:#e6db74 } -/* LiteralStringRegex */ .chroma .sr { color:#e6db74 } -/* LiteralStringSingle */ .chroma .s1 { color:#e6db74 } -/* LiteralStringSymbol */ .chroma .ss { color:#e6db74 } -/* LiteralNumber */ .chroma .m { color:#ae81ff } -/* LiteralNumberBin */ .chroma .mb { color:#ae81ff } -/* LiteralNumberFloat */ .chroma .mf { color:#ae81ff } -/* LiteralNumberHex */ .chroma .mh { color:#ae81ff } -/* LiteralNumberInteger */ .chroma .mi { color:#ae81ff } -/* LiteralNumberIntegerLong */ .chroma .il { color:#ae81ff } -/* LiteralNumberOct */ .chroma .mo { color:#ae81ff } -/* Operator */ .chroma .o { color:#f92672 } -/* OperatorWord */ .chroma .ow { color:#f92672 } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { color:#ff0;font-weight:bold } +/* LiteralString */ .chroma .s { color:#0ff;font-weight:bold } +/* LiteralStringAffix */ .chroma .sa { color:#0ff;font-weight:bold } +/* LiteralStringBacktick */ .chroma .sb { color:#0ff;font-weight:bold } +/* LiteralStringChar */ .chroma .sc { color:#0ff;font-weight:bold } +/* LiteralStringDelimiter */ .chroma .dl { color:#0ff;font-weight:bold } +/* LiteralStringDoc */ .chroma .sd { color:#0ff;font-weight:bold } +/* LiteralStringDouble */ .chroma .s2 { color:#0ff;font-weight:bold } +/* LiteralStringEscape */ .chroma .se { color:#0ff;font-weight:bold } +/* LiteralStringHeredoc */ .chroma .sh { color:#0ff;font-weight:bold } +/* LiteralStringInterpol */ .chroma .si { color:#0ff;font-weight:bold } +/* LiteralStringOther */ .chroma .sx { color:#0ff;font-weight:bold } +/* LiteralStringRegex */ .chroma .sr { color:#0ff;font-weight:bold } +/* LiteralStringSingle */ .chroma .s1 { color:#0ff;font-weight:bold } +/* LiteralStringSymbol */ .chroma .ss { color:#0ff;font-weight:bold } +/* LiteralNumber */ .chroma .m { color:#ff0;font-weight:bold } +/* LiteralNumberBin */ .chroma .mb { color:#ff0;font-weight:bold } +/* LiteralNumberFloat */ .chroma .mf { color:#ff0;font-weight:bold } +/* LiteralNumberHex */ .chroma .mh { color:#ff0;font-weight:bold } +/* LiteralNumberInteger */ .chroma .mi { color:#ff0;font-weight:bold } +/* LiteralNumberIntegerLong */ .chroma .il { color:#ff0;font-weight:bold } +/* LiteralNumberOct */ .chroma .mo { color:#ff0;font-weight:bold } +/* Operator */ .chroma .o { } +/* OperatorWord */ .chroma .ow { } /* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color:#75715e } -/* CommentHashbang */ .chroma .ch { color:#75715e } -/* CommentMultiline */ .chroma .cm { color:#75715e } -/* CommentSingle */ .chroma .c1 { color:#75715e } -/* CommentSpecial */ .chroma .cs { color:#75715e } -/* CommentPreproc */ .chroma .cp { color:#75715e } -/* CommentPreprocFile */ .chroma .cpf { color:#75715e } +/* Comment */ .chroma .c { color:#007f7f } +/* CommentHashbang */ .chroma .ch { color:#007f7f } +/* CommentMultiline */ .chroma .cm { color:#007f7f } +/* CommentSingle */ .chroma .c1 { color:#007f7f } +/* CommentSpecial */ .chroma .cs { color:#007f7f } +/* CommentPreproc */ .chroma .cp { color:#0f0;font-weight:bold } +/* CommentPreprocFile */ .chroma .cpf { color:#0f0;font-weight:bold } /* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color:#f92672 } -/* GenericEmph */ .chroma .ge { font-style:italic } +/* GenericDeleted */ .chroma .gd { } +/* GenericEmph */ .chroma .ge { } /* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { } -/* GenericInserted */ .chroma .gi { color:#a6e22e } +/* GenericHeading */ .chroma .gh { font-weight:bold } +/* GenericInserted */ .chroma .gi { } /* GenericOutput */ .chroma .go { } /* GenericPrompt */ .chroma .gp { } /* GenericStrong */ .chroma .gs { font-weight:bold } -/* GenericSubheading */ .chroma .gu { color:#75715e } +/* GenericSubheading */ .chroma .gu { font-weight:bold } /* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { } +/* GenericUnderline */ .chroma .gl { text-decoration:underline } /* TextWhitespace */ .chroma .w { } -} \ No newline at end of file +} diff --git a/static/google19b14a3a19b00214.html b/static/google19b14a3a19b00214.html new file mode 100644 index 00000000..a91e95e4 --- /dev/null +++ b/static/google19b14a3a19b00214.html @@ -0,0 +1 @@ +google-site-verification: google19b14a3a19b00214.html diff --git a/test.yaml b/test.yaml new file mode 100644 index 00000000..ce013625 --- /dev/null +++ b/test.yaml @@ -0,0 +1 @@ +hello