什么?5分钟就能做出一个自己的博客

效果展示

https://blog.lijiext.vercel.app/
图片25

前期准备

  1. github账号
  2. vercel账号
  3. git客户端
  4. Visual Studio Code

步骤

1. 配置Hugo

首先需要下载Hugo,这里大部分人使用的是64位Windows系统,我将下载Hugo的64位Windows版本。打开:https://github.com/gohugoio/hugo/releases,找到最新的Releases的附件部分,点击下载适合自己的版本
图片1
下载完成后,将文件解压得到如下文件:
图片2
在这里我将此文件复制到D盘的hugo文件夹下(我的软件一般都安装在D盘)完成后如图所示:
图片3
下面需要配置系统环境变量,以便让hugo程序能够在系统任意位置运行:
图片4
图片5
图片6
配置好环境变量之后验证一下:
Win+R 输入cmd打开命令提示符输入hugo version,出现如下内容说明安装成功
图片7

2. 生成网站

在自己想要保存博客的位置打开命令行工具,输入hugo new site myblog,myblog即为文件夹的名称
图片8
下面用Visual Studio Code打开刚刚新建的文件夹:
图片9
使用git init初始化git仓库:
图片10
添加自己喜欢的主题:git submodule add https://github.com/varkai/hugo-theme-zozo.git themes/zozo
我这里使用的是zozo,在https://themes.gohugo.io/可以找到更多好看的主题:
图片11
下面需要在配置文件config.toml添加一行theme = "zozo"
图片12
下面需要添加一篇文章,在命令行即Terminal中执行如下命令:

hugo new posts/10001.md

现在我们可以在content/posts下的10001.md文件中开始使用markdown编写我们的博客了:
图片13
文章写完后保存,然后在Terminal中执行:

hugo server -D -w -p 80 --disableFastRender

图片14
下面我们将能够在本地的80端口访问刚刚生成的网站:
图片15
图片16
到现在,网站可以在本地运行了,下面我们需要将我们的博客托管在线上,这里使用github+vercel作为托管平台:

  • 新建一个github仓库
    图片17
  • 将本地文件上传到该git仓库
git add *
git commit -m "add 10001.md"
git remote add origin https://github.com/lijiext/blog.git
git branch -M main
git push -u origin main
  • 部署网站
    https://vercel.com/dashboard上New Project:
    图片18
    一步步来然后选择:
    图片19
    请注意,当部署完成后,会显示完成页面:
    图片20
    但是需要注意图中的预览图和我们本地的网站并不一样,这是由于网站的资源文件无法找到所致,因为vercel在部署网站时会给我们随机分配域名,所以我们需要手动配置一下站点的URL:
    在项目的overview页面可以看到分配的随机域名:
    图片21
    复制它,更改config.toml文件的baseURL为随机域名:
    图片22

然后再次提交,等待半分钟后网站就会重新部署,此时在浏览器中访问域名就会正常了:

git add *
git commit -m "change baseURL"
git push

结果展示

下面就是我们刚刚弄好的博客了:
图片23

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值