Skip to content

whosydd/hugo-even-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hugo + Vercel 轻松搭建个人博客

预览

blog-even-hugo

参考

Hugo 中文文档 https://www.gohugo.org/

Even 主题中文文档 https://github.com/olOwOlo/hugo-theme-even/blob/master/README-zh.md

搭建 Hugo 环境

安装 Hugo

github 下载地址:https://github.com/gohugoio/hugo/releases

如果你想要修改themes/even/assets/下的文件,请安装extended版本

设置环境变量

将解压后的文件夹添加到环境变量中的系统变量中的Path

Capture

Capture1

测试

hugo env -v

打开终端,输入hugo env -v,输出如下图表示安装成功!

Capture2

构建项目

项目结构

名称 说明
archetypes/ 放置内容模板,在创建新内容时会根据模板创建文章
content/ 博客内容,全部使用 markdown 格式
layouts/ 博客模板文件,决定内容如何呈现
static/ 图片、css、js 等静态资源
themes/ 存放主题
config.toml 项目的主配置文件(有的主题也会使用config.yml)

使用模板构建项目

只需要在本仓库中点击Use this template,设置好仓库名称,就可以根据模板创建自己的项目仓库了

配置选项

config.toml

这里仅仅是我修改过的配置项,请在项目根目录的config.toml中查看详细配置

# 这里设置成你博客的域名
baseURL = "http://www.whosydd.ml/"

# 设置默认显示语言,可选语言可以在themes/even/i18n/中查看
defaultContentLanguage = "zh-cn"

# 设置网站标签页显示的信息
title = "Blog - C'est la vie!"

# 设置作者
[author]
  name = "GY"

# 配置目录 (使用weight进行排序)
[[menu.main]]
  name = "主页"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "标签"
  weight = 20
  identifier = "tags"
  url = "/tags/"
[[menu.main]]
  name = "类别"
  weight = 30
  identifier = "categories"
  url = "/categories/"
[[menu.main]]
  name = "归档"
  weight = 40
  identifier = "archives"
  url = "/post/"

# 设置站点建立时间
[params]
  since = "2021"

  # 是否在归档页显示文章的总数
  # 如果设置为false,则不会在主页显示文章的内容预览
  showArchiveCount = true

  # 这是我新添加的选项,设置为true时,会在主页中的每篇文章中显示阅读更多
  # show 'read more' link ?
  readMore = false

  # 是否显示文章中的页脚信息(包含作者,上次修改时间,markdown链接,许可信息)
  postMetaInFooter = false

  # 设置页脚中社交链接图标,你可以选择你想要显示的社交链接
  [params.social]
    a-email = "mailto:[email protected]"
    #b-stack-overflow = "http://localhost:1313"
    #c-twitter = "http://localhost:1313"
    #d-facebook = "http://localhost:1313"
    #e-linkedin = "http://localhost:1313"
    #f-google = "http://localhost:1313"
    g-github = "http://github.com/whosydd"
    #h-weibo = "http://localhost:1313"
    #i-zhihu = "http://localhost:1313"
    #j-douban = "http://localhost:1313"
    #k-pocket = "http://localhost:1313"
    #l-tumblr = "http://localhost:1313"
    #m-instagram = "http://localhost:1313"
    #n-gitlab = "http://localhost:1313"
    #o-bilibili = "http://localhost:1313"

favicon 图标

你可以在这里创建 favicon 图标,然后将解压之后的所有图标文件放到项目根目录的static/中即可

Screenshot of Favicon Generator - Text to Favicon - favicon.io

文章模板

  • 可以在themes/even/archetypes/中找到文章模板,只需要将该文件复制一份,放到项目根目录中的archetypes/中即可。
  • 建议只保留一些常用的配置项即可
  • 其中的Draft配置项默认为true,表示该文章为草稿,发布时记得改为false
  • 你可以在根目录的content/post/中查看所有的文章

本地调试

运行hugo

hugo server -D

不加-D时,不会显示Draft配置项设置为true的文章

新建文章

hugo new post/<文件名>.md

你可以在content/post/下查看新建的文章

推送到github

# 添加所有文件到暂存区
git add .

# 提交commit
git commit -m 'updated'

# push到github
git push

vercel 部署

注册

vercel 注册地址:https://vercel.com/signup

一般情况下,建议使用 github 账号注册

新建项目

  1. 点击New Project创建新项目

Screenshot of Dashboard – Vercel

  1. 初次使用,这里应该会出现install Vercel for Github,按照流程安装即可

Screenshot of Project Creation Flow – Vercel

  1. 点击上图中的链接会跳转到https://github.com/settings/installations页面,点击`Configur`进行配置

Screenshot of Installed GitHub Apps

Screenshot of Installed GitHub App - Vercel

  1. 配置好后则可以选择相应的仓库,点击Import导入

Screenshot of Project Creation Flow – Vercel (1)

  1. 出现以下页面就表示部署成功了,点击Go to Dashboard进入管理页面

Screenshot of Project Creation Flow – Vercel (2)

  1. 如果页面不显示,请点击View Build Logs查看Build Logs了解详情

Screenshot of hugo-even-template – Overview – Vercel

配置项目

Screenshot of demo – Overview – Vercel

添加自定义域名

注册域名

你可以在https://my.freenom.com/注册一个长达12个月的免费域名,不过这个网站大陆访问有点慢

请注意:这里使用免费域名仅为了演示,如果有需求,建议直接阿里云购买域名

添加域名
  1. 在此页面输入已注册的域名,会弹窗让你选择重定向,选择Recommended的即可

Screenshot of demo – Domains – Vercel

域名解析

这里建议直接选择 Nameservers,然后根据提示将ns1.vercel-dns.comns2.vercel-dns.com添加到注册域名网站的相关配置中,然后点击Refresh刷新状态,如果都打钩了就可以了,此时就可以通过你填写的域名访问博客了

https://my.freenom.com/注册的域名为例:注册成功后,需要在主页依次点击`Services -> My Domains -> Manage Domain -> Management Tools -> Nameservers,选择Use custom nameservers,添加ns1.vercel-dns.comns2.vercel-dns.com`即可

Screenshot of demo – Domains – Vercel (2)

删除项目

Settings -> Advanced -> Delete Project

Screenshot of demo – Advanced – Vercel

自动部署

只要第一次部署成功后,以后只需要将本地新写的文章推送到 github 即可,vercel 会在每次 commit 后自动部署

最后

由于hugo我也是刚刚接触,所以只是简单配置了一下,还有很多地方都不够完善。如果发现有哪里写的不好或者不对的地方,欢迎 pr~

C'est la vie!