1200字范文 > hugo搭建个人博客

hugo搭建个人博客

时间：2023-02-22 10:46:29

相关推荐

hugo搭建个人博客

效果图预览：

大家好，最近重搭了个人博客，之前用 Hexo，WordPress 也搭建过，但是总是很不理想，最近用 hugo 感觉还不错，接下来将我搭建的过程记录下来，方便大家自己尝试；

本地搭建

因为我用的是 MacBook，所以接下来也将基于此环境做演示；

安装 hugo

brew install hugo #安装hugohugo version #查看版本

这里注意下，安装的是拓展版本，方便以后做拓展，如何查看自己安装的是不是拓展版本，hugo v0.89.2+extended darwin/amd64 BuildDate=unknown查看版本显示这个就是拓展版本（带 extended 的）；

新建站点

hugo new site site-name #自行定义站点名

添加主题

cd site-name #切换到站点根目录git init #初始化git仓库git clone /dillonzq/LoveIt.git ./themes #这里我安装的是LoveIt主题cp themes/loveit/exampleSite/config.toml ./config.toml #直接将主题的配置文件复制过来替换成站点配置

站点配置

设置站点默认语言

defaultContentLanguage = "zh-cn"

禁用主题目录

#themesDir = "../../"

设置站点名称

title = "语梦谈"

设置语言项

注意：这个主题默认是支持多语言的，如果使用多语言，需要分别创建对应的文章，不然会报错，我这里只用到了中文；

在languages项中，默认有三个语言大项，我删除了其余两个，下面主要展示的是中文的配置内容，同理，只粘贴出我修改过的项：

[languages.zh-cn]weight = 2# 网站语言, 仅在这里 CN 大写languageCode = "zh-CN"# 语言名称languageName = "简体中文"# 是否包括中日韩文字hasCJKLanguage = true# 默认每页列表显示的文章数目paginate = 12# [UA-XXXXXXXX-X] 谷歌分析代号googleAnalytics = ""# 版权描述，仅仅用于 SEOcopyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."# 菜单配置[languages.zh-cn.menu][[languages.zh-cn.menu.main]]identifier = "posts"# 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标pre = ""# 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标post = ""name = "文章"url = "/posts/"title = ""weight = 1[[languages.zh-cn.menu.main]]identifier = "thinks"pre = ""post = ""name = "思考"url = "/thinks/"title = ""weight = 2[[languages.zh-cn.menu.main]]identifier = "tags"pre = ""post = ""name = "标签"url = "/tags/"title = ""weight = 3[[languages.zh-cn.menu.main]]identifier = "categories"pre = ""post = ""name = "分类"url = "/categories/"title = ""weight = 4[[languages.zh-cn.menu.main]]identifier = "about"pre = ""post = ""name = "关于"url = "/about/"title = ""weight = 5[[languages.zh-cn.menu.main]]identifier = "github"pre = "<i class='fab fa-github fa-fw'></i>"post = ""name = ""url = "/jouzeyu"title = "GitHub"weight = 6[languages.zh-cn.params]# 网站描述description = "盛年不重来，一日难再晨"# 网站关键词keywords = ["blog", "Jouzeyu"]# 应用图标配置[languages.zh-cn.params.app]# 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题title = "语梦谈"# 是否隐藏网站图标资源链接noFavicon = false# 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件svgFavicon = ''# Android 浏览器主题色themeColor = "#ffffff"# Safari 图标颜色iconColor = "#5bbad5"# Windows v8-10 磁贴颜色tileColor = "#da532c"# 搜索配置[languages.zh-cn.params.search]enable = true# 搜索引擎的类型 ("lunr", "algolia")type = "algolia"# 文章内容最长索引长度contentLength = 4000# 搜索框的占位提示语placeholder = ""# 最大结果数目maxResultLength = 10# 结果内容片段长度snippetLength = 50# 搜索结果中高亮部分的 HTML 标签highlightTag = "em"# 是否在搜索索引中使用基于 baseURL 的绝对路径absoluteURL = false[languages.zh-cn.params.search.algolia]index = "index.zh-cn"appID = ""searchKey = ""# 主页信息设置[languages.zh-cn.params.home]# RSS 文章数目rss = 10# 主页个人信息[languages.zh-cn.params.home.profile]enable = true# Gravatar 邮箱，用于优先在主页显示的头像#gravatarEmail = "jouzeyu@"# 主页显示头像的 URLavatarURL = "/u/56755229?v=4"# 主页显示的网站标题 (支持 HTML 格式)title = "语梦谈"# 主页显示的网站副标题subtitle = "盛年不重来，一日难再晨"# 是否为副标题显示打字机动画typeit = true# 是否显示社交账号social = true# 免责声明 (支持 HTML 格式)disclaimer = ""# 主页文章列表[languages.zh-cn.params.home.posts]enable = true# 主页每页显示文章数量paginate = 6# 主页的社交信息设置[languages.zh-cn.params.social]GitHub = "jouzeyu"Linkedin = ""Twitter = ""Instagram = ""Facebook = ""Telegram = "jouzeyu"Medium = ""Gitlab = ""Youtubelegacy = ""Youtubecustom = ""Youtubechannel = ""Tumblr = ""Quora = ""Keybase = ""Pinterest = ""Reddit = ""Codepen = ""FreeCodeCamp = ""Bitbucket = ""Stackoverflow = ""Weibo = ""Odnoklassniki = ""VK = ""Flickr = ""Xing = ""Snapchat = ""Soundcloud = ""Spotify = ""Bandcamp = ""Paypal = ""Fivehundredpx = ""Mix = ""Goodreads = ""Lastfm = ""Foursquare = ""Hackernews = ""Kickstarter = ""Patreon = ""Steam = ""Twitch = ""Strava = ""Skype = ""Whatsapp = ""Zhihu = ""Douban = ""Angellist = ""Slidershare = ""Jsfiddle = ""Deviantart = ""Behance = ""Dribbble = ""Wordpress = ""Vine = ""Googlescholar = ""Researchgate = ""Mastodon = ""Thingiverse = ""Devto = ""Gitea = ""XMPP = ""Matrix = ""Bilibili = ""Email = "jouzeyu@"RSS = true

说明：

菜单配置中标签和分类会自动获取，其他分类需要创建对应的文件夹来存放文章，比如文章对应的是posts，那么创建新文章的时候就是hugo new posts/my-first-post.md;搜索配置建议选algolia，需要其他额外配置，放在下面讲；主页的社交信息设置中，是那一项有内容首页就会显示那一项；

线上相关准备

如果想要部署到线上，那么下面的准备工作是必不可少的，另外还需要你有一个备案过的域名（国内的话）

设置搜索

需要去algolia官网去注册一个账号，可以参考这篇文章：Hugo Algolia 搜索及 Netlify 自动化处理

设置评论系统

hugo 默认用的是 Valine 评论系统，需要完成这项需要做以下几步：

注册账号

网址是：/

创建应用

数据存储创建 class

配置安全域名

如果不配置，会提示 Code 403: 访问被 API 域名白名单拒绝，请检查你的安全域名设置.

绑定域名

这里稍微注意下，这个域名可以用别的二级域名，不用使用原本解析访问的域名。另外如果提示正在部署中，不用着急，它需要等待一会，如果提示 dns 未解析，那按照说明解析就可以了。

配置到 hugo

appId = "fa7mRg1BGQdKUEs5b5c42rah-gzGzoHsz" #从应用凭证中获取的appKey = "ekeMLbPcNnMXGj9w30Ehadcj" #从应用凭证中获取的serverURLs = "https://valine.unlazy.run" #就是上一步你填写的域名

部署到服务器

简单讲下原理，我们写出 markdown 文章，通过 hugo -D 将文章打包成 html 之类的静态访问资源，所以如果你和我一样想部署到服务器时，你只需要将打包生成的 public 文件夹上传到服务器就可以了，不需要在服务器上搭建 hugo，也不需要上传其他的文件；

这一块有很多中方法，我简单说下我的方法：

第一步：通过hugo -D 命令生成静态资源，即public目录第二步：将public上传到github仓库，这里用了一个本地自己写的脚本第三步：服务器安装nginx，域名绑定，指向网站所在目录第四步：生成https证书第五步：通过定时任务，在服务器上定时运行脚本-将github仓库的内容同步到服务器