hugo+github搭建我的个人博客

来到简书平台已经有两年多了,在这里见证了我的生信入门之路。由于种种原因吧,萌生了创建自己的个人博客的想法。利用周末两天的时间摸索了结合hugo+github搭建个人博客的方法,总算是有个大致的雏形了,也许以后就主要在我的博客里记录学习笔记了,下面简单总结一下搭建流程。

1、安装hugo

(1)首先下载安装包https://github.com/gohugoio/hugo/releases

  • 我的是window电脑,其次需选择extended版本
  • 选择的是 hugo_extended_0.96.0_Windows-64bit.zip

(2)解压、点击安装后,将hugo路径添加到环境变量。

image.png

(3)在任意文件进入cmd模式,输入hugo version。如果正常返回版本信息,表明已经成功安装。

hugo version
#hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb+extended windows/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio

hugo的操作都是命令行式。之后的cmd操作都是基于gitbash操作模式下,可自行安装探索一下。下述的演示在 C:\Users\xiaoxin\Desktop\test目录下

2、新建站点

  • 在test文件夹,进入gitbash的cmd模式
hugo new site myblog
#会新建一个 myblog 的文件夹

ls ./myblog
# archetypes/  config.toml  content/  data/  
# layouts/  static/  themes/
##我目前了解如下
#config.toml 进行参数配置,与之后的theme相关
#content 之后博客(.md)的文件都储存在这里
#layout 可个性化修改博客的展示细节,需要懂网络架构知识
#static 储存一些静态文件,比如本地图片,插入到博客中
#themes 主题,接下来会介绍

关于配置文件toml,类似于yaml。不同人有不同的偏好,对于hugo,优先toml;但也支持yaml。

3、下载主题

点击具体每一种主题,都能找到提供的下载方式。最简单的是git下载到上面提到的theme文件夹

cd ./myblog
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

ls ./themes
# PaperMod/
ls ./themes/PaperMod/
# LICENSE  README.md  assets/  go.mod  i18n/  images/  layouts/  theme.toml

4、修改配置

按照我参考的示例博客比较推荐yaml,因此这里删除原来的config.toml,改为config.yaml。

然后进行博客主题的配置:一些基本配置在所有主题中都一样;但也有一些参数是每个主题的自定义的。

暂时先配置最重要参数:theme

cat config.yaml
# baseURL: https://www.*****.cn  #绑定的域名
# languageCode: zh-cn # en-us
# title: My first Blog
# theme: PaperMod # 主题名字,和themes文件夹下的一致

5、新建笔记

  • 接下来就是写一些博客笔记,需要有头文件的markdown格式。
  • 可通过下述命令,创建博客(也可以完全自己建一个)。然后按照markdown的格式增添内容即可。
hugo new posts/fisrt-blog.md
cat ./content/posts/fisrt-blog.md
# ---
# title: "Fisrt Blog"
# date: 2022-04-16T11:47:19+08:00
# draft: true
# ---

#示例fisrt-blog.md
cat ./content/posts/fisrt-blog.md
# ---
# title: "Fisrt Blog"
# date: 2022-04-16T11:47:19+08:00
# draft: false
# ---



# # this is a blog

# welcome to my blog

# blalalalalala........

# 这里插入一张网上的图片

# ![](https://s2.loli.net/2022/04/10/A5Th7VIcXHxY9Rj.png)

# End

6、测试博客

hugo server
# Built in 48 ms
# Watching for changes in C:\Users\xiaoxin\Desktop\test\myblog\{archetypes,content,data,layouts,static,themes}
# Watching for config changes in C:\Users\xiaoxin\Desktop\test\myblog\config.yaml
# Environment: "development"
# Serving pages from memory
# Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
# Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
# Press Ctrl+C to stop
  • 博客的首页主题样式
image.png
  • 一篇博客的内容
image.png

7、绑定域名

  • 之后就是将博客内容上传到网上,有很多方式。我之前是上传到github,简单介绍如下;

(1)需要先在个人的github账号中创建github.io仓库,参考一张别人的图。

image.png

(2)将当前博客内容编译为html,放到public文件夹

#首先需要记得修改 config.yaml文件的 baseURL参数设置为你想要绑定的域名
## baseURL: https://www.username.github.io 

##然后使用hugo编译
hugo
# hugo -F --cleanDestinationDir
# 加了上述参数表示表示每次生成的public都是全新的,会覆盖原来的。

ls ./public
# 404.html  assets/  categories/  index.html  index.xml  
# page/  posts/  sitemap.xml  tags/

(3)使用git将public文件夹的内容上传到github.io仓库

cd public/
#(1)第一次上传
git init
git add .   #添加当前路径的所有文件
git commit -m 'create blog'
git remote add origin https://github.com/username/username.github.io.git
#根据gitbash提示操作
git push -u origin master

##如果push失败,比如time out...可尝试下面的命令
git config --global http.sslVerify "false"
git config --global --unset http.proxy
git config --global --unset https.proxy

#(2)之后再修改、更新博客
git add .
git commit -m 'add blogs'
git push -u origin master

如上操作后,理论上再访问 https://username.github.io/ 就是一个博客的页面了。当第一次操作时总会遇到各种各样的问题,比如我自己。就是不断尝试、报错、再修改过程。

8、个性化修改

  • 启用PaperMod主题自带的Search功能:搜索博客

(1)先在content文件夹新建search.md

---
title: "Search"
layout: "search"
---

(2)然后在config.yaml文件修改相关参数

#https://www.sulvblog.cn/posts/blog/build_hugo/#4%e9%85%8d%e7%bd%ae%e6%96%87%e4%bb%b6
- identifier: search
            name: 搜索
            url: search
            weight: 80
  • 启用PaperMod主题的Archive栏:记录所有博客的发表时间

·(1)先在content文件夹新建archive.md

---
title: "Archive"
layout: "archives"
summary: "archives"
---

(2)然后在config.yaml文件修改相关参数

- identifier: archives
    name: 归档
    url: archives/
    weight: 41

此外参考https://www.sulvblog.cn/posts/blog/博客,修改了博客文章的侧边栏TOC目录悬浮窗,标签云展示、SEO优化等;参考卜蒜子http://ibruce.info/2015/04/04/busuanzi/,为网站添加了访问量记录。因为很多是细节的修改,就不细述了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容