June 22, 2020

Hugo博客搭建过程

在搭建之前。我参考了b站视频以及其它分享以hugo框架搭建静态博客的博主们的方法,搭建好了hugo为博客框架的静态博客。 现在,就具体说说是怎么搭建hugo静态博客的。

1.下载一些相关的工具

在搭建博客之前,先准备好所要的软件材料。 1.git工具 2.github(创建博客存储上传文件) 3.hugo博客系统文件 4.用它写作的typora 5.以及搭配typora的PicGo图床工具

2.环境变量的设置以及配置站点文件

下载好git工具hugo博客系统文件,然后设置环境变量。 以win10为例,在搜索栏中。输入path,找到编辑系统环境变量。

找到hugo下载的所在文件目录,复制到PATH中。注意路径不能有中文。 在cmd中命令看看是否安装正确,出现:

git version
git version 2.26.2.windows.1
hugo version
Hugo Static Site Generator v0.72.0-8A7EF3CF windows/amd64 BuildDate: 2020-05-31T12:08:42Z

提示安装路径正确。

安装好后,再在其它盘创建一个根站点,假如命名为###。

hugo new site ###

然后在###文件中就会得到

这些文件。

用cd命令打开themes文件,在hugo主题中找一个主题,比如我找的charaka-hugo-theme主题。在cmd中命令如下:

cd themes
git clone https://github.com/natarajmb/charaka-hugo-theme.git

下载好主题包后,把themes中的主题包文件复制覆盖到原###中的根文件中。

config原配置文件如下:

baseurl = "https://example.com"(填你的github博客域名)
languageCode = "en"(改成ZH-CN)
title = "Charaka"(自己可以改成自己喜欢的博客名称)
theme = "charaka-hugo-theme"
copyright = "&copy; <a href=\"https://github.com/natarajmb\">Nataraj Basappa</a> 2018"(这里可以更改为你的连接和申明)
disqusShortname = ""(disqus评论用,不过我改成了valine评论系统)
googleAnalytics = ""(谷歌分析)

[params]

[author]
  name = "Nataraj Basappa"
  homepage = "https://natarajmb.com"(博主名称和网站,自己改)

[params.highlight]
  style = "zenburn"

[params.share]
  enabled = "true"

[[params.social]]
  url = "about"
  fa_icon = "fas fa-info"(关于页面,可以修改)

[[params.social]]
  url = "https://github.com/natarajmb/"
  fa_icon = "fab fa-github"(github可以改成自己的)

[[params.social]]
  url = "https://www.linkedin.com/in/natarajmb/"
  fa_icon = "fab fa-linkedin-in"(这里我改成了知乎)

[[params.social]]
  url = "https://twitter.com/natarajmb/"
  fa_icon = "fab fa-twitter"(推特改成自己的)

上述改好后,第二步就完成了。至于怎么添加valine评论系统,在这里。我参考了B站up主CeyCeyChannel的视频教程,有兴趣的可以看看。

2022.2.1号更新,由于valine评论作者不再维护。所以我转用waline。

3.文章创建和github设置

你要创建一篇新文章,就得在cmd中命令。

hugo new post/XXXX.md

由于我的文章创建是在posts,故而有所不同,注意文章是yaml格式。比如我现在创建的新文章

title: "Hugo博客搭建过程"(博客文章名称)
date: 2020-06-22T09:19:50+08:00(时间)
draft: false (设为false可被编译为HTML,true供本地修改)
categories: [想法](归档)
tags:["hugo","blog"](分类)

在cmd博客站点根目录中,启动博客预览

hugo server

打开 http://localhost:1313/可以看到,新文章已经生成。

设置打开github,创建自己的仓库。 新建一个new Repository,然后以(你的用户名.github.io)创建一个。

设置好 你的用户名.github.io 然后创建仓库。

4.设置静态文件及上传

在config文件中,把baseurl改成自己的Repository name. 设置好config中baseurl和themes的路径。在站点目录下命令

hugo

生成public文件夹,用于上传。

在初次配git时,记得要配置邮箱和github用户名,不然会提示“Please tell me who you are”。

# git config --global user.email "you@example.com
# git config --global user.name "Your Name"

如果一切顺利,静态文件就会上传在public中。然后将public本地文件上传到github上。如下:

# cd public(进入public)
# git init (初始化)
# git remote add origin https://github.com/XXXXX/XXXXX.github.io.git(链接仓库,注意.git)
# git add .(添加public中的文件)
# git commit -m "first commit"(提交文件描述,可以随便写)
# git pull origin master (取回远程主机某个分支的更新)
# git push -u origin master (推送本地分支到远程分支)

5.图床问题及后续文章更新

md文章可以添加本地图片及网上图床服务,而网上图床存储又有免费和收费之分。 这里我选择的是收费图床存储,腾讯云COS作为图床。但是COS上传后必须得打开网站一张张复制链接。很麻烦。这里可以用到 Picgotypora ,而且二者可以搭配使用。 首先,依次打开对象储存》储存桶列表》创建储存桶,如下:

​ 名称自己小写字母填一个,地域这里选择物理位置最近的一个,访问权限选公有读私有写,标签随便填。服务器加密选SSE-COS.点击确定。

​ 打开api密钥管理,新建密钥。

​ 在Picgo中,选COS为V5。设定上述文件,点击确定保存。

​ 至于picgo和typora搭配。设置如下:picgo打开:

​ typora则是:

​ 然后点击“验证图片上传选项”。出现如下提示:

代表成功获得图片url,可以直接拖动图片在typora上传了。

图片问题解决,如果你想以后再写博客文章,你可以运行一下命令:

hugo new post/你的文章名.md

至于推送文章,你可以用下面的命令:

# hugo
# cd public
# git add .
# git commit -m "XXXXXXX"
# git pull origin master
# git push origin master

当然,你也可以把文章自动部署到github,不再赘述。

基本上,这就是搭建博客的全过程了,想到什么再说吧。


网页参考:1.CodeSheep手把手教你从0开始搭建自己的个人博客 |第二种姿势 | hugo2.hojun_cn:hugo+github博客搭建教程!3.CeyCeyChannel:『手把手』在 HUGO 中添加 Valine 评论系统的过程4.SAquarius的梦想屋:Hugo+github搭建个人博客(windows10)5.natarajmb:模板制作者

在此一一感谢。

东京

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

©阿波尔的博客2019-2024