个人快速搭建网站经验，第一次搭建个人网站遇到的坑，以及经验分享

最新推荐文章于 2024-07-23 13:00:00 发布

GH-ShanBao

最新推荐文章于 2024-07-23 13:00:00 发布

阅读量1.5k

点赞数 50

文章标签：经验分享

本文链接：https://blog.csdn.net/m0_57089822/article/details/139991736

版权

为何搭建个人网站

写博客是一个学习和记录的过程。通过整理和分享自己的知识和经验，并且将它们永久记录下来，方便自己日后温习和回顾。

基于hugo快速搭建个人网站，我使用的是hugo-theme-stack主题，顺带记录搭建过程，以便需要的小伙伴查看。

Hogo 安装

Hugo是一个流行的开源内容管理系统（CMS），用于构建现代化的网站。它是由Go语言编写的，具有快速、安全、可扩展性等优点。

Hugo使用Markdown语言来编写网站的内容，并支持许多其他格式。Hugo还具有强大的模板引擎和可定制的主题，使您能够轻松地创建独特的网站外观和用户体验。

Hugo、Git下载（编辑器我用的是vs code 因为轻量级开箱即用比较方便）

Hugo 详情可以参照官方文档：

Getting Started | Stack

hugo 安装需要的工具Hugo v0.119.0和Git 2.42.0.windows.2，电脑系统使用的windows 10， Hugo环境和Git下载方式是通过官网。

特别注意Hugo下载如图版本，否则会有很多报错，当时本人搭建的时候用的没有下载扩展版最后还是没弄明白，然后重新有重建了几次。都是泪啊 😢。

Git安装详情

Vscode-x64-1.84.1

Vscode官网（可能下载比较慢）

Hugo 配置环境变量

hugo下载好之后，是一个zip格式的文件（如下图）解压后就是Hugo的环境将该环境配置到环境变量就会在任意目录调用Hugo环境

将其解压到自己的目录中，我的解压目录是D:\Dev (个人习惯我一般环境都在该目录)解压后就是如下文件夹

进入该文件夹复制目录路径D:\Dev\hugo_extended_0.119.0_windows-amd64 右键此电脑

Alt text

注意这里有两个环境变量一个是用户变量，一个是系统变量，用户变量是仅该用户生效，系统变量所有用户都生效，看自己需求配置。

Alt text

配置完成后进入 cmd 输入 hugo version 进行验证，返回hugo版本证明配置成功。

配置成功就可以创建博客网站了！！！

创建博客网站

在命令行 cmd 运行命令 :

hugo new site test

该命令意在构建一个网站的目录并指定相对目录的test目录，没有该目录将会自动创建：运行成功后便会在该目录下生成一些初始化文件:

D:\CODES\TEST
├─archetypes
├─assets
├─content
├─data
├─i18n
├─layouts
├─static
└─themes

此刻就搭建好了最基础的个人博客网站（没有皮肤那种的）。此时运行hugo server 命令打开网页会显示：

Alt text

这是因为2我们没有导入皮肤主题，现在就是最初是的状态，如果是大牛的话可以自己开发主题（目前不会 冏冏），这里就以我本人小白的身份带大家安装主题：

当然先提供hugo主题网站 Hugo Themes，可以选择自己喜欢的主题根据官方文档进行配置，这样就大功告成啦！

实际上官方文档对于英语不好的同学还有刚入坑的同学们不是很友好，有些翻译过来就变得很奇怪。

我就以我自己的亲身实践帮大家总结一下吧！

主题安装主要是分为四个方式：

git clone 安装
git submodule 安装
go module 安装（需要安装 Go 语言）
本地安装

我个人更推荐第一种方式，考虑到后续升级的难易，这算是最均衡的一种方式。具体的安装方法可以在各主题的说明中找到，我这里安装的是Stack。在网站目录下，输入：

git init
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

如果想通过其他方式来获取主题，可以参考官方文档

下载完成后将一些没用的文件夹删除（按需删除我自己用不到）

Alt text

将一些主题中的文件夹移动到test目录下，方便以后操作:

test\themes\hugo-theme-stack\exampleSite\content   
test\themes\hugo-theme-stack\exampleSite\config.yaml  
test\themes\hugo-theme-stack\assets

test\content
test\config.yaml
test\assets

根据 Stack 的说明文档，Stack后续将改用.toml格式的Config文件，不过其配置步骤基本相同。

预览网站

这是参考文档直接输入命令

hugo server

即可运行

但是！但是！他出问题了

Alt text

错误提示中提到了几个关键的点：

TLS握手超时：这可能是由于在尝试与Twitter的oembed API进行通信时出现了网络问题。你可能需要检查你的网络连接或尝试在不同的网络环境下运行你的Hugo服务器。
模板执行超时：在你的网站的主题和布局文件中，Hugo在尝试执行一些模板时超时了。这可能是由于模板复杂度高，需要花费大量时间来计算。如果可能，你可以尝试优化这些模板，减少它们的计算复杂度，或者增加Hugo的模板执行超时时间。

简单来讲就是一些国内无法访问的网站比如twitter 直接将这部分代码删除即可主要影响的是 test\content\post\rich-content\index.md

万万没想到是因为一篇示例博客印象的这里可以直接删除该博客文件夹

然后我们就可以启动啦！！

Alt text

在浏览器输入 localhost:1313就进入我们的博客啦！

最终我的博客目录就是这样的删除了一些我用不到的：

Alt text

主题下文件夹我也进行了删除：

Alt text

基本的已经完成了我们就可以进行博客的编写啦！

基本操作

编写博客

博客编写是md格式的文件放在content\post\下这里创建的每一个文件夹都是一篇博客我这里没有采用英文的博客命名直接就是 index.md 如果采用多语言可在每个博客后面加上语言 index.en.md。

每篇博客最开始写的有标题、副标题、创建时间、修改时间、网页地址、主页头图片、是否评论、分类、标签。

Alt text

生成静态网页

如果需要部署到nginx或者github pages 中直接在命令行输入：

hugo

即可生成静态资源文件默认生成位置为./public，你可以在配置文档中使用publishDir参数指定，也可以直接使用-d参数指定。

发布网站

Github Pages

我整了好几次最终还是放弃了有兴趣的小伙伴可以参考炸鸡人博客

nginx

这里用的是centos7的虚拟机或则云服务器先安装的docker然后在docker下配置的nginx

这里配置nginx不是重点，请参阅后续博客更新后我也将链接放在这里： coentos7 配置docker 以及nginx

配置好nginx后：

编辑配置文件 nginx.conf:


worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    sendfile        on;
    
    keepalive_timeout  65;

    server {
        # 指定端口
        listen       80;
        # 指定前端项目所在的位置
        location / {
            root /usr/share/nginx/html/test;
        }
       
    }

}

然后将test\public所有文件拷贝到服务器/usr/share/nginx/html/test目录下

通过docker exec nginx nginx -s reload 对nginx进行刷新配置访问配置好的对应的网址即可访问到自己的博客。

主题配历程

之后的都是仿照的Exnadio’s Blog对博客进行了一些美化剩下的都是照搬，在此鸣谢 Exnadio's Blog

静态js、css本地化

每次访问博客时都会很慢还是因为有些js、css是国外服务器我们将这些文件下载改成本地的就会快很多，体验翻倍！

主要值修改test\themes\hugo-theme-stack\data\external.yaml 文件

Vibrant:
    - src: /js/vibrant.min.js
      integrity: sha256-awcR2jno4kI5X0zL8ex0vi2z+KMkF24hUW8WePSA9HM=
      type: script

PhotoSwipe:
    - src: /js/photoswipe.min.js
      integrity: sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo=
      type: script
      defer: true

    - src: /js/photoswipe-ui-default.min.js
      integrity: sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=
      type: script
      defer: true

    - src: /css/default-skin.min.css
      type: style

    - src: /css/photoswipe.min.css
      type: style

KaTeX:
    - src: /css/katex.min.css
      integrity: sha256-J+iAE0sgH8QSz9hpcDxXIftnj65JEZgNhGcgReTTK9s=
      type: style

    - src: /js/katex.min.js
      integrity: sha256-InsNdER1b2xUewP+pKCUJpkhiqwHgqiPXDlIk7GzBu4=
      type: script
      defer: true

    - src: /js/auto-render.min.js
      integrity: sha256-y39Mpg7V3D4lhBX4x6O0bUqTV4pSrfgwEfGKfxkOdgI=
      type: script
      defer: true

Cactus:
    - src: /js/cactus.js
      integrity:
      type: script
    - src: /css/style.css
      integrity:
      type: style

将每个网址访问保存，这里可以用stream++进行加速一下

保存路径为:

Alt text

这样再次访问就会速度翻倍！

添加评论

评论系统是博客中非常重要的一部分。它允许读者表达他们对帖子的看法和想法。它还允许作者与读者互动。

Stack 目前支持以下评论系统：

我使用的是 Giscus 自认为敝教教简单上手

进入官网 Giscus

官方显示：

选择 giscus 连接到的仓库。请确保：

1、该仓库是公开的，否则访客将无法查看 discussion。 2、giscus app 已安装，否则访客将无法评论和回应。 3、Discussions 功能已在你的仓库中启用。

创建仓库

进入Github 进行登陆或注册：https://github.com 创建仓库：

Alt text

安装giscus

启用 Discussions 功能

然后将用户名/仓库名输入到

Alt text

做一些偏好配置：

Alt text

最后根据生成的配置：

Alt text

修改config.yaml 文件

Alt text

重启项目就大功告成啦！！

让我们一起看看效果：

Alt text

GH-ShanBao

关注

50
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
个人快速搭建网站经验，第一次搭建个人网站遇到的坑，以及经验分享

特别注意Hugo下载如图版本，否则会有很多报错，当时本人搭建的时候用的没有下载扩展版最后还是没弄明白，然后重新有重建了几次。hugo下载好之后，是一个zip格式的文件（如下图）解压后就是Hugo的环境将该环境配置到环境变量就会在任意目录调用Hugo环境。注意这里有两个环境变量一个是用户变量，一个是系统变量，用户变量是仅该用户生效，系统变量所有用户都生效，看自己需求配置。将其解压到自己的目录中，我的解压目录是D:\Dev (个人习惯我一般环境都在该目录)解压后就是如下文件夹。
复制链接

扫一扫