[建站相关] 从零开始搭建个人博客网站系列 一、使用hugo创建个人站点
作者:CC下载站 日期:2021-12-02 01:00:55 浏览:8 分类:站长帮
使用个人博客也有一年多的时间,这一年多的时候踩了很多坑,也学到了很多知识。
使用hugo创建个人站点
介绍
今天开始一个系列教程,从零开始搭建个人博客系列,这个系列使用Hugo这个静态网站构建框架。其实上目前有很多好用的静态网站生成框架,Hugo只是其中一个。 Hugo号称世界上最快的网站构建框架。 简单,易用,高效,易扩展使它的特点,也是我选择它的原因。而且Hugo这两年的热度非常火,基本上是最热门的静态网站生成框架了。如果你需要搭建个人博客,选择它绝对没错。
原理
既然要用到它,那么要先说原理,免得大家一头雾水。 Hugo,也就是静态网站生成框架,构建了一套代码生成框架和各种可选的主题。可以帮助我们自动搭建好我们的个人博客网站,不需要关注任何展示的效果,只需要关注博客内容本身即可。是不是很强大。
打开Hugo的官网可以看到介绍:
Hugo 是最受欢迎的开源静态站点生成器之一。凭借惊人的速度和灵活性,Hugo 使建设网站的乐趣再现。
点击主题:这里有成千上万的好看的主题,喜欢任何一款都可以一键应用到你的个人博客网站上。
而我们需要做的就是关注博客内容即可。
流程
流程其实非常简单:
- 写博客,支持Markdown语法
- 通过hugo框架提供的语法编译成 HTML文件,HTML文件就是浏览器上可以展示的文件
- 把你的HTML文件发布到服务器或者网站托管平台。
这样你的博客就发布好了,你可以在浏览器输入你的网站地址查看你的博客了。
简单到只需要执行一个hugo
命令来翻译markdown文件到HTML完成了。
OK,简单介绍完了,你是不是很期待,我们下面来讲第一部分。 使用Hugo创建个人站点,后续的部分会在这个系列后续的博客中陆续发布。
安装
我这边介绍在macOS上的安装教程。其他环境(Windows/linux)类似。
1
2
3
>>> brew install hugo
>>> hugo version
hugo v0.115.4+extended darwin/arm64 BuildDate=unknown
创建站点
创建一个站点 techxiaofei, 并进入到站点根目录。 这个站点命名没那么重要,可以随意取名。
1
2
3
4
5
>>> hugo new site techxiaofei
>>> cd techxiaofei
>>> ls
archetypes content layouts resources themes
config.toml data public static
- config.toml 是配置文件,在里面可以定义博客地址,构建配置,标题,导航栏等等。
- themes是主题目录,可以下载喜欢的主题,然后配置在config.toml里面。
- content是博客文章的目录。
- static是博客的静态资源,比如图片
- public是编译后的目标文件的目录。
注:当前目录是你的源文件,也就是包括一堆模版,博客源文件(markdown),配置文件,图片的一个源文件的集合。 最终展示在网页的是目标文件,也就根据你的资源和配置,最终生成的一个个包括css,js的html网页。
主题
在最终我们的博客可以运行之前,我们需要配置一个主题。
推荐一款主题,可以在根目录下载并配置。
可以去官方主题网站:https://themes.gohugo.io/
挑选你喜欢的主题。
我们选择一款比较活跃的主题:Jane
安装主题:
git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane
这个时候Jane
这个主题就被下载到themes目录下。
注:如果是从其他地方copy过来的站点,有可能遇到:
1
WARN 2021/02/03 10:56:17 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
这个时候需要重新git clone一下主题。
配置
下载好主题后,主题的exampleSite目录一般会有一个config.toml配置文件。复制到你的根目录下的config.tmol文件,然后根据注释做一些基本的修改。
我把config文件复制下来的配置做的一些简单的修改:
languageCode = "zh-cn" //改为中文
defaultContentLanguage = "zh-cn" # en / zh-cn / ... (This field determines which i18n file to use)
title = "小编的个人博客"
[author] # essential # 必需
name = "codingxiaoma"
[sitemap] # essential # 必需
changefreq = "weekly"
priority = 0.5
filename = "sitemap.xml"
[[menu.main]] # config your menu # 配置目录
name = "主页"
weight = 10
identifier = "home"
url = "/"
[[menu.main]]
name = "归档"
weight = 20
identifier = "archives"
url = "/post/"
[[menu.main]]
name = "标签"
weight = 30
identifier = "tags"
url = "/tags/"
[[menu.main]]
name = "分类"
weight = 40
identifier = "categories"
url = "/categories/"
配置基本上每一行都给了详细的注释,你可以很容易修改。
发布第一篇文章
配置完成后,发布第一篇文章。
hugo new post/my-first-post.md
其中有着 draft 选项。当 draft 为 true 的时候,默认是不会渲染的,渲染 draft 需要加 -D 的启动参数。 我们可以将 draft 改为 false,这样默认就可以渲染了。
一般来说,把draft: true去掉,加一些markdown语法的内容就可以了。
后续可以直接自己直接在编辑器里面 **content/post/**目录下创建 md 文件来写博客,比较方便。也可以在post里面创建多层目录,方便归类。
这是我的文章配置。
---
title: "我的第一篇博客"
date: 2022-12-27T00:54:21+08:00
categories : [
"hugo",
]
---
# 这是我的第一篇博客
这是我的第一篇**博客**
[个人网站链接](https://techxiaofei.com)
![图片](/img/hugo/hugo.png)
注意: 图片的根目录是 static
目录,也就是你在static目录创建文件夹并存放文件。
执行命令
>>> hugo server
| EN
-------------------+-----
Pages | 11
Paginator pages | 0
Non-page files | 0
Static files | 5
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0
Built in 21 ms
Watching for changes in /Users/hugo/iwtbabc/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/hugo/iwtbabc/config.toml
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/ 即可看到具体效果。
其中文章中,可以设置 tag
, categories
, keywords
等属性。
Demo完成,我们现在可以在本地浏览器上浏览你的hugo博客。
你也可以查看配置的描述,自己尝试修改配置的一些参数,看一下浏览器的效果。比如说你可以把页面里面的英文标签改为中文的,直接在配置里面修改就行。
hugo是立即生效的,不需要重新启动。
下一篇将具体讲如何把hugo博客托管到github Pages上。就相当于部署到了服务器上,这样你就可以随时随地查看你的博客了。
<全文完>
猜你还喜欢
- 03-29 [环境测试] Hexo部署GitHub Pages
- 03-22 [源码设置] 如何设置Xiuno BBS URL-Rewrite(伪静态设定)
- 03-06 [建站交流] PicGo + smms 构建图床
- 11-18 [emlog技巧] Emlog非插件显示评论者IP属地
- 11-09 [网站维护] WordPress 后台速度慢?加快仪表板速度的 15 种方法
- 11-09 [WordPress插件] 10 个最好用的 WordPress 聊天机器人插件(免费和付费)
- 11-09 [WordPress开发] 探索 WordPress 6.3 中的增强样板(Patterns)
- 11-09 [网站维护] 无需插件即可优化 WordPress 速度的 12 种策略
- 11-09 [网站安全] WordPress 安全统计:WordPress 到底有多安全?
- 09-20 [jsp技术] JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
- 09-15 [Lightsail容器] AWS Lightsail VPS:一种在云中运行容器的简单方法
- 07-28 [运维笔记] 解决网站出现"SSL_ERROR_RX_RECORD_TOO_LONG"问题
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[资料课程] 适合3-7岁学前幼小衔接 《22天搞定拼音》,认、读、拼、写
[课程] 衣之镖-- 《辅行诀五脏用药法要》研究 线上54讲课程视频
[课程] 12节在家也能练出性感蜜桃臀,让臀部变得圆、紧、翘
[游戏娱乐] 《灵魂石幸存者》v10g中文版
[跨境电商] TikTok中视频课程30天线上陪跑
[电影] [摩登笑探 冇面俾].1995.HDTV1080i.国语中字
[游戏娱乐] 《阿斯特赖亚》v1.1.42中文版
[游戏娱乐] 《消逝的光芒:仇恨》中文版
[电影] 非常偵探/The Private Eye Blues 1994
[摄影] 让手机秒变单反的手机拍摄好物
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[即时通讯] 微信PC版WeChat 3.9.9.43 多开防撤回绿色版
[安卓软件] Solid Explorer文件管理器APP 2.8.38 破解版
[浏览器] Google Chrome v123.0.6312.59便携增强版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[动画] 北斗神拳(1984) [两季合集] [MKV]
[资料] 抗战阵亡将士资料+续编
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[电影] 2024年喜剧片·热辣滚烫 [mp4]
[影视] 铁爪 WEB-DL版下载 2023 The Iron Claw 23.48G
- 最新评论
-
杂物房内的旧档资源不保证有效CC下载站 评论于:05-14 不能**123 评论于:05-14 我想看看mw2ddyy 评论于:04-26 好东西阿zfy123123 评论于:04-18 谢谢楼主xiaoqi 评论于:04-12 勿在线解压,勿手机解压,请在电脑上用最新款压缩软件解压!推荐360压缩或者好压CC下载站 评论于:04-10 无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26
- 热门tag