使用hugo搭建自己的个人博客

引用自:   https://zhuanlan.zhihu.com/p/509702302

安装Go

go的官网网站下载安装包 https://golang.google.cn/dl/

不需要配置环境变量

安装完毕后,打开命令行,输入

*go version*

输入后显示版本号,表示安装成功。

安装hugo 附上链接:下载hugo

https://link.zhihu.com/?target=https%3A//github.com/gohugoio/hugo/releases

选择对应的版本号进行下载,这里我的是win10 64位的,选择该版本下载。

 

 

https://github.com/gohugoio/hugo/releases/tag/v0.68.3

将解压的的hugo.exe放在和go.exe同级目录下

如下图所示:

配置好环境变量后在命令行输入命令 hugo version打印出版本号即表示成功 如图所示:

 

生成本地站点 在命令行输入命令

hugo new site test 如下图所示:

 

 

选择主题

https://themes.gohugo.io/

https://tmuguet.gitlab.io/hugo-split-gallery/next/

 

切换到我们的本地站点,进入themes目录下,选择一款主题进行下载

cd test cd themes git clone https://github.com/AmazingRise/hugo-theme-diary.git

注: 在这里我们用到了git工具,如果你的电脑中没有git,我们也可以打开主题在GitHub中的下载地址,下载zip文件,到themes文件夹下解压即可。

新建文件 创建名为my_first_blog的markdown文件,在markdown文件中写入内容

链接:markdown基础语法

hugo new post/my_first_blog.md 浏览文件中的内容 theme参数用来指定主题,既你在themes目录下的文件夹名称

如图所示:

 

 

生成页面,分发路由:

hugo server --theme=hugo-theme-diary --buildDrafts

http://localhost:1313/diary/

效果:

 

 

以上为本地博客搭建,下面我们把博客部署到码云上

 

Gitee Pages

https://gitee.com/help/articles/4136#article-header0

将本地项目推到码云 官方文档: 将个人博客部署到码云Pages

创建码云仓库

成功后页面:

 

配置config.toml 在创建的站点内的config.toml文件中配置对应内容

baseUrl = "/" #基础路由 languageCode = "zh-CN" #语言 title = "时钟" #网站名称 theme = "diary" #指定主题名 Paginate = 10 #一页展示多少条内容 disqusShortname = "XXX" #评论功能(写disqus的账号名)

[params] 1 2 3 4 5 6 7 8 生成静态页面 hugo --theme=diary 或者 hugo --baserUrl='/' 1 2 3 输入命令后会在根目录下生成public目录

效果图:

 

推送项目 cd public/ git init git add . git commit -m "first commit" git remote add origin https://gitee.com/sun_shuai_gitee/SimonBlog.gitan1993.gitee.io.git git push -u origin master

完成部署生成域名 生成我们博客的个人网址

开起码云的Gitee pages 服务 流程图:

进入pages服务

开始部署

更新网站内容

部署完成 在最后附上效果 网站地址(已不维护)

 

其他参考

  • Hugo搭建博客(一)— 基本设置

https://cloud.tencent.com/developer/article/1722255?from=15425&areaSource=102001.8&traceId=ssTTy3eW5FXZkA1m-XQXP

Hugo中文文档

https://hugo.aiaide.com/

  • hugo 导入图片,两种方式

https://blog.51cto.com/u_14315147/4578435

  • Hugo中Markdown图片资源存放几种方式

https://zhuanlan.zhihu.com/p/395493131

 

https://sunua.gitee.io/simonblog/about/

Markdown插入视频、mp3音频和gif图的语法

https://blog.csdn.net/muxuen/article/details/124534999

搭建自己的hugo博客站点(自己域名)

https://blog.csdn.net/weixin_39246554/article/details/124573538

Hugo中增加tags等分类

https://orianna-zzo.github.io/sci-tech/2018-01/blog%E5%85%BB%E6%88%90%E8%AE%B04-hugo%E4%B8%AD%E5%A2%9E%E5%8A%A0tags%E7%AD%89%E5%88%86%E7%B1%BB/

 

 

启动Hugo

终于到了看实际效果的时候了,在博客的项目根目录下运行:hugo server --buildDrafts --theme=even

如果在配置文件中已经配置了theme的话就不需要再指定 - -theme 参数了, - -buildDrafts 参数的意思是渲染所有的post包括 draft=true状态的。

打开浏览器,在地址栏中输入: http://localhost:1313, 就可以看到我们的博客了。

 

更改配置一般来说使用默认的配置就可以了,但是要注意配置baseurl参数:baseurl = "http://这里是你的域名/"

当我们把博客部署到服务器上的时候注意要把配置中的baseurl改成自己的域名。

主题的配置参数也是在config.toml中配置,各个主题的配置不尽相同,需要参考主题的文档。

关于部署

假设你需要部署在GitHub Pages上,首先在GitHub上创建一个Repository,命名为:sinnerliu.github.io(sinnerliu替换为你的github用户名)。

并且要在该Repository的setting里面,GitHub Pages部分设置一下

在站点根目录执行 Hugo 命令生成最终页面:$ hugo --theme=blackburn --buildDrafts --baseUrl="https://sinnerliu.github.io/"

如果一切顺利,所有静态页面都会生成到 public 目录,将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。$ cd public

$ git init

$ git remote add origin git@github.com:sinnerliu/sinnerliu.github.io.git

$ git add -A

$ git commit -m "first commit"

$ git push -u origin master

使用总结

日常操作总结--新建博客markdown文件,并编辑博客内容(文件名为 **.md )

hugo new post/useGit.md

--生成静态页面

hugo --theme=blackburn --buildDrafts --baseUrl="https://sinnerliu.github.io/"

---发布

cd public

git add .

git commit -m "new blog added"

git push origin master