hugo搭建个人博客
效果图预览:
大家好,最近重搭了个人博客,之前用 Hexo,WordPress 也搭建过,但是总是很不理想,最近用 hugo 感觉还不错,接下来将我搭建的过程记录下来,方便大家自己尝试;
本地搭建
因为我用的是 MacBook,所以接下来也将基于此环境做演示;
安装 hugo
brew install hugo #安装hugo
hugo version #查看版本
这里注意下,安装的是拓展版本,方便以后做拓展,如何查看自己安装的是不是拓展版本,hugo v0.89.2+extended darwin/amd64 BuildDate=unknown
查看版本显示这个就是拓展版本(带 extended 的);
新建站点
hugo new site site-name #自行定义站点名
添加主题
cd site-name #切换到站点根目录
git init #初始化git仓库
git clone https://github.com/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 = "https://github.com/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@outlook.com"# 主页显示头像的 URLavatarURL = "https://avatars.githubusercontent.com/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@outlook.com"RSS = true
说明:
- 菜单配置中标签和分类会自动获取,其他分类需要创建对应的文件夹来存放文章,比如文章对应的是
posts
,那么创建新文章的时候就是hugo new posts/my-first-post.md
; - 搜索配置建议选
algolia
,需要其他额外配置,放在下面讲; - 主页的社交信息设置中,是那一项有内容首页就会显示那一项;
线上相关准备
如果想要部署到线上,那么下面的准备工作是必不可少的,另外还需要你有一个备案过的域名(国内的话)
设置搜索
需要去algolia
官网去注册一个账号,可以参考这篇文章:Hugo Algolia 搜索及 Netlify 自动化处理
设置评论系统
hugo 默认用的是 Valine 评论系统,需要完成这项需要做以下几步:
注册账号
网址是:https://console.leancloud.cn/
创建应用
数据存储创建 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仓库的内容同步到服务器
相关问题答疑
如果是本地的话,截止到线上相关准备前就已经结束了,你可以本地运行
hugo server -D
然后访问http://localhost:1313
预览网站;如果想要部署到
github page
可能你还需要看看其他文章,因为我还没试过;如果你的文章不显示,那需要将 md 文件中的
draft
选项改为false
,这个选项的意思是,该文章是否草稿;如果需要加标签,你可以这样写:
draft: false tags: ["MySQL"]
如果需要加分类,你可以这样写:
draft: false categories: ["MySQL学习"]
如果文中包含照片,可以先放到任意图床中,拿到链接放到文中,当然你也可以用本地文件;
hugo搭建个人博客相关推荐
- Github Pages + Hugo 搭建个人博客
文章目录 Github Pages + Hugo 搭建个人博客 零.效果 一.创建 Github 库 二.安装 Hugo 和 Git 三.新建 Hugo 网站 四.选择 Hugo 主题 五.新建文章 ...
- 手把手教你使用Hugo搭建个人博客网站|保姆级教学
搭建个人博客网上目前用的比较多的博客框架是Hexo.Hugo.Jekyll.本文详细介绍利用最新的Hugo(基于Go语言的博客框架)在windows上搭建个人博客网站,从域名注册到后期维护,全程保姆级 ...
- 如何使用hugo搭建个人博客(五):添加站内搜索(gcse)
站内搜索推荐使用google custom search engine(gsce) gcse的使用方法强烈推荐阅读:Hexo博客优化配置之–为自己博客添加站内搜索 关键部分: 下面介绍如何在crisp ...
- 利用github pages+GitHub Actions+Hugo搭建个人博客
github pages是Github提供的一个网页寄存服务,可存放静态网页,包括博客.项目文档等. 参考Hugo官方文档 1.创建github仓库 仓库名的格式:<github用户名> ...
- Hugo + Github Pages 搭建个人博客
尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...
- 使用 hugo oss 搭建个人博客网站
系列文章目录 文章目录 系列文章目录 前言 一.下载hugo 二.oss 三.域名 四.创建博客上传 五.发布,上传文章 前言 本文主要详解如何用最低的成本搭建个人博客网站 原本我是直接用的githu ...
- centos7 搭建本地git_小白也能看懂,30 分钟搭建个人博客!
点击上方蓝色字体,选择"置顶公众号" 优质文章,第一时间送达 正文 首先我们谈一谈搭建个人博客必要性,个人认为在学习过程中,被动接受知识对你的提高是轻微的.比如你看网课学习,在听老 ...
- gitee搭建个人博客教程
gitee搭建个人博客教程 基础环境: gitee账号.git.node.js.npm.Typora(需要版本高一点) 个人博客 创建仓库 创建账号同名的仓库 获取账号名方式如下,去掉@号的部分. 创 ...
- 手把手搭建个人博客(图文教程)
很多图文无法复制,请移步原文查看浏览体验更棒,原文链接:https://mp.weixin.qq.com/s/y9V91U7JF_tbkbvXJBqTWQ 搭建个人博客 首先我们谈一谈搭建个人博客必要 ...
- 搭建hexo博客历程二- Gitee版 (主要 解决404和样式丢失)
前期的GitHub版搭建hexo博客 前期的node .hexo等等都已经配置完成,只需要在Gitee上建库,以及修改一些配置.继续依葫芦画瓢,在Gitee上画出来.例如 https://gitee. ...
最新文章
- visual code 在标签页打开_VSCode 不在新标签页打开文件如何解决?
- 服务器安装Windows Server + Ubuntu双系统
- JUC多线程:系统调用、进程、线程的上下文切换
- tomcat catalina localhost 没有项目_实用shell脚本--一键配置tomcat定期日志清理功能
- Redis数据库(三)——(主从复制、哨兵模式、集群)
- maven 加入第三方库_关于maven,你还要翻阅多少资料才能整理出这一份完整文档...
- linux 添加本地源,linux 添加本地yum源
- JavaScript 事件:Web 表单如何实现禁用右键、复制粘贴/剪切和输入框自动填充?
- 用宝塔本地搭建php,Windows系统如何使用宝塔面板一键快速搭建本地服务器环境(LNMP/LAMP)...
- NodeJs或者命令行爬取网络教程并生成PDF文件,以阮一峰JavaScript教程和ES6教程为例 ...
- esp8266电池供电方案_普通照明、应急照明、事故照明系统的9种设计方案解读,收藏好!...
- 送书 | 聊聊阳光问政
- win7系统怎么进行网络重置?
- 多头平仓,白糖再度下跌
- 微信公众平台接口API
- 世界银行公布各国1996-2018年GDP及GDP增长率
- 爱因斯坦论宗教与自然科学的关系
- python123第四周_百度杯十月第四周WriteUp
- Datawhale来到2050!
- 【压缩感知合集8】MP算法(算法实现、收敛讨论以及问题分析)