文章

免费博客方案:hugo+cloudflare

将hugo部署到cloudflare

部署hugo

下载hugo

下载地址
hugo有两个版本,标准版和扩展版,扩展版在标准版基础上增加了对 Sass/SCSS 等预处理语言的支持。我这里选择了windows的extend

189.1.png

解压后,在目录下运行cmd

创建新站点

hugo new site newsite

将创建一个名为 newsite 的目录,并进入该目录下,将hugo.exe复制到该目录,或者改全局变量,不然无法执行hugo的命令,之后的命令都在该目录下执行

下载主题

主题下载,我这里下载的是PaperMod
编辑newsite目录下的hugo.toml

theme = "PaperMod"

新建文章

hugo new posts/hello world.md

draft: ture代表草稿文件,改成false代表正式发布

添加标签

tags = ['markdown','blog']

本地预览

hugo server -D

-D代表输出包括标记为 draft: true 的草稿文章
到浏览器输入127.0.0.1:1313进行访问

构建网站

预览觉得没问题后,构建网站生成静态文件

hugo -D

将自动创建public目录,该目录需要上传至cloudflare

更多配置

新建about页面

在content目录下新建about.md

+++
title = "关于"
layout = "about"
url = "/about/"
summary = "about"
+++
# 欢迎来到我的小站
这个站点主要做个备份

新建归档页面

在content目录下新建archives.md

+++
title = "归档"
layout = "archives"
url = "/archives/"
summary = "archives"
+++

新建标签页面

hugo new tags/_index.md

自定义配置

# 基本配置
baseURL = 'https://example.com/'    //域名
languageCode = 'zh-cn'    //中文
title = 'site'            //站点名称
theme = "PaperMod"        //主题名称
paginate = 10             //首页每页显示的文章数

# 参数配置
[params]
  description = "This is my personal website"
  author = "qiaoqiao"         //作者名
  defaultTheme = "auto"       //默认主题颜色
  ShowToc = true              //显示目录
  TocOpen = false             //目录默认是否展开
  ShowWordCount = true        //字数统计
  ShowReadingTime = true      //阅读时间
  comments = false            //全局评论
# 菜单配置 
[menu]
  [[menu.main]]
    name = "🏡Home"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "📄归档"
    url = "/archives"
    weight = 2
  [[menu.main]]
    name = "✒️文章"
    url = "/posts/"
    weight = 3
  [[menu.main]]
    name = "📌tags"
    url = "/tags/"
    weight = 4
  [[menu.main]]
    name = "👁️‍🗨️About"
    url = "/about/"
    weight = 5
# 自定义首页显示内容
[params.homeInfoParams]
  Title = "Welcome to My Blog"
  Content = "This is my personal blog where I share my thoughts and ideas."

logo设置

logo.ico上传到static/images目录下,默认会被PaperMod识别加载

上传cloudflare

将生成的public文件夹上传

189.2.png

配置域名

配置的域名需要托管在cloudflare下

189.3.png

直接访问自定义的域名,cloudflare自动配置了https,完成

License:  CC BY 4.0