Featured image of post 在 Cloudflare Pages 部署 hugo 博客

在 Cloudflare Pages 部署 hugo 博客

使用 cloudflare pages 搭建 hugo 博客,并安装 hugo stack 主题,发布你的第一篇博客

前言

本站使用Hugo搭建,部署在cloudflare pages上,能够实现免域名、免服务器搭建。总之就是能通过白嫖获得一个自己的博客。

Hugo 安装

你可以参考Hugo官方的安装指导 Hugo的安装非常简单,在大多数平台上只需要一行命令就能完成安装 这里简要说一下Windows平台的安装方法 首先Windows平台的Hugo安装需要使用Chocolatey作为包管理器。如果你没有Chocolatey,那么首先需要安装它。 Chocolatey的安装也非常简单只需要一行如下命令:

如果你使用的是cmd,则执行

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

如果你使用的是powershell,则执行

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

之后稍等片刻即可安装成功 通过使用命令 choco -? 可以验证是否安装成功,安装成功的话运行上述命令会出现Chocolatey的帮助信息

之后按照Hugo官方安装文档即可完成Hugo安装 我更推荐安装hugo-exxtended

choco install hugo-extended -confirm

博客项目搭建

安装完Hugo之后,接下来就要进行博客项目的搭建。

这里你也可以参照官方文档来食用

首先,你需要选择一个路径来存放你的博客项目

使用cd命令进入到你想要的路径之后

hugo new site 你的项目名

这样就能创建一个新的网站,命令执行完之后,当前路径下会出现一个 你的项目名 的一个文件夹,你的博客的数据就存放在这里。

下载Hugo主题

创建项目之后,我们需要一个精美的主题

本站使用的主题是Stack,你可以点击他的官方文档进行查看

可以在Stack的 GitHub 仓库的 Release页面 找到最新的稳定版。 下载后把 hugo-theme-stack-master 改名为 hugo-theme-stack 并放到站点目录的 theme 文件夹下

之后将theme/hugo-theme-stack/exampleSite文件夹下的所有内容拷贝到你的博客项目目录

编辑主题配置文件

主题的配置文件是刚刚拷贝到项目目录的config.yaml

参照官方文档给出的说明,你可以编辑他来自定义你的博客

发布你的第一篇文章

通过使用hugo new post/xxx.md来创建一篇文章

之后你的博客项目下的content/post文件夹下会出现xxx.md文件,这个文件中的内容就是你的文章的内容

运行Hugo站点

通过以上的这些操作,你的博客站点已经搭建完成,接下来我们可以尝试在本地运行这个站点来预览博客

hugo server -D

运行成功会出现以下提示

Start building sites … 
hugo v0.88.1-5BC54738+extended windows/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio

                   | ZH-CN  
-------------------+--------
  Pages            |    xx  
  Paginator pages  |     x  
  Non-page files   |     x  
  Static files     |     x  
  Processed images |     x  
  Aliases          |    xx  
  Sitemaps         |     x  
  Cleaned          |     x

Built in 486 ms
Watching for changes in D:\code\HTML\xxx\{archetypes,assets,content,data,layouts,static,themes}
Watching for config changes in D:\code\HTML\xxx\config.yaml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

使用浏览器打开http://localhost:1313/就能看到你的站点了

部署你的站点到Cloud flare Pages

一个只能在本地运行的博客站点是毫无意义的

所以我们需要将博客部署到互联网上

目前有很多的服务商都提供了Pages功能,比如github gitee等,我这里选择cloud flare pages作为服务商

创建github仓库

要使用Cloud flare Pages,你首先需要将你的博客项目上传到github 你需要创建一个git仓库,公开或者私有仓库都行,我更推荐使用私有仓库

之后将你的博客项目上传到github

配置Cloud flare Pages

访问 https://pages.cloudflare.com/ ,没有账号的可以按照提示注册,有账号的可以直接登录

进入pages页面点击创建项目

之后添加自己的github账号,并选择自己的博客项目

进入下一步架构预设选择Hugo,其他全部默认即可

注意,环境变量需要填写如下信息:

变量名称
HUGO_VERSION 0.88.1

之后等待部署成功即可

Cloud flare Pages会自动为你分配域名 默认为项目名称.pages.dev

使用 Hugo 构建
主题 StackJimmy 设计