如何部署一个类似此网页的个人网站

01 Jan, 0001

使用hugo模板将个人网站部署在netlify上

如果你需要快速搭建一个个人网站，你可以参考本文章本部署方式参考了【大学生提高课】3 hexo与hugo博客搭建与github自动化推送和服务器推送感谢他的教程让我成功用此方法成功搭建了个人网站，如果你看不懂我的文字版，你可以看他的视频版

首先打开hugo官网,如果需要更详细的信息，你可以在这个官网上查看点击中间的getting started 然后依次点击quick start，install hugo 根据你电脑的系统选择并安装对应的版本 (其实我是直接在GitHub上搜索hugo并安装的)github上的hugo（写到一半才想起来我是这么安装的）下面是如何在GitHub上安装hugo 进入GitHub上的hugo后点击右侧的releases，选择要下载的版本，请下载extended版本的 extended自带所需的sass windows下载下图所示版本将zip文件解压，将hugo.exe文件所在的目录添加到环境变量 如何添加环境变量？ 简易版 [深度了解版](Windows 中的环境变量（Windows11 为例）_win11环境变量-CSDN博客) 在你准备好的文件夹中打开命令行（在空白处点击右键选择在终端中打开）输入以下命令

hugo new site blod

此时在这个文件夹下将会创建一个blog文件夹到此为止最基础的工作已经完成了，我们已经拥有了一个个人网站的模板，接下来我们要为我们的网站选择一个主题回到hugo主页点击左上角的Themes 在这里你可以为你的个人网站选择一个预设好的主题我将使用[TeXify3](TeXify3 | Hugo Themes)这个主题来做示范点击download按钮会跳转到主题的GitHub页面，点击code，点击download zip

下载并解压源码，将源码文件整个放入之前用命令行创建的blog文件夹下的theme文件夹中，删除hugo-texify3-master文件的后缀-master 复制\blog\themes\hugo-texify3中的layouts文件夹到blog中复制\blog\themes\hugo-texify3\exampleSite中的所有文件到blog中如果你有vscode或者类似的编辑器，用编辑器打开blog文件夹在当前文件夹目录下打开终端输入

hugo

观察是否报错然后运行以下命令来启动服务

hugo serve

至此你应该得到了一个在本地运行的个人网站（笔者使用此主题部署时发生了报错😭不过别的主题可以成功部署）接下来你需要将这个文件夹使用git传到github上，注意要设置为public 接下来进入netlify官网点击get started，点击add new site，使用github部署，然后选择刚刚传上去的项目这里填写你的网站地址（不过很容易重名）注意选择正确的分支（main或者master）然后点击deploy html

大功告成，你获得了自己的网站🥳🥳🥳

后记（个人的碎碎念）（可以不看）

第一篇博客，历经大约5小时，终于写完了（但还有很多错误比如上面提到的主题，我就没有部署成功，我太菜了😭😭😭）在部署的过程中遇到了一大堆问题，本人不太会前端，导致解决突发状况的时间较长（最后也没解决）而且通篇读下来这篇博客，你可能会发现前言不搭后语（因为有些东西是中途插入的）不过还好，最后还是写完了blog，而且你会发现后面的教程有点紧（我很急）不过我之后可能还会更新一个更全面的（真的吗？？？）

事已至此，先看muzimi吧 😋😋😋 之后我可能会再研究以下前端，主要是研究一下这个blog的结构坚持再多发点blog 你可能遇到的问题（因为我遇到了）（我还研究了一下怎么安装Chocolatey）😭 但是正常不会遇到这种情况，除非你装的是非entended版本

ERROR TOCSS-DART: failed to transform "/sass/layouts/content.scss" (text/x-scss). You need to install Dart Sass, see https://gohugo.io//functions/css/sass/#dart-sass: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

我的解决方法 安装Chocolatey软件包管理工具方法一：以管理员身份打开cmd.exe（很重要），执行以下代码

`bash @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"`

方法二：以管理员身份打开powershell.exe,执行以下代码

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

上面两个是我从网上复制下来的 (之后我才发现可以用npm install -g sass直接装sass😭) 使用命令安装sass

choco install sass

(ps感觉有点放太多图了，是不是应该多用一些命令行安装，这样就不用放图了，但是这样又不太直观🤔) pss:我还看到一个网站[buy me a coffee](Buy Me a Coffee),感觉可以在自己的网站上搞一个？

20：11 21：15 23：06 23：47 0：06 就这样！！！散！！

#部署