🌞

利用Hugo构建个人网站-1:前期准备

这是一篇建立个人博客网站的指南,它将展示在Windows系统下,如何脱离繁琐的代码编写,仅通过开源网站框架(Hugo)与第三方平台(GitHub、Netlify、Forestry)之间的简单连接,在最低零成本的情况下,生成独属于个人的网站。

主要的思路如下:

  1. Hugo——生成网页
  2. GitHub——内容中转
  3. Netlify——发布网站
  4. Forestry——内容管理

1. 前期准备

在我们开始创建网站内容前,我们需要为我们的网站配置好基础的环境,它们包括Hugo、GitHub与Git,本章将具体说明如何进行配置。

1.1 Hugo配置

1.1.1 下载&安装

首先下载在 这里 下载Hugo压缩包,每个操作系统有普通及拓展(extended)版本,这里建议选择extended版本。

在这里,由于我是Windows 64位的系统,所以选择了最新的"hugo_extended_0.64.1_Windows-64bit.zip"安装包。

下载后将Hugo解压到本地磁盘,可以是非系统盘,这里需要记住解压的位置,我们将在下一步使用。

本次,我在E盘新建了一个Hugo文件夹,将压缩包中的内容解压到了"E:\Hugo"。

1.1.2 配置环境变量

  1. 右键点击"我的电脑",点击“属性”

Hugo配置环境变量.jpg

  1. 点击“高级系统设置”,打开“系统属性窗口”

  2. 点击“环境变量”,打开“环境变量”窗口

  3. 在“环境变量”中,选中“系统变量”下的“Path”选项

  4. 点击“编辑”,打开“编辑环境变量”窗口

  5. 在“编辑环境变量”中,点击“新建”

  6. 输入我们解压Hugo压缩包的位置,本例,我输入了“E:\Hugo”

  7. 输入完成后,依次点击“确定”来应用各个窗口的设置。

    安装完成。

1.1.3 验证安装

通过 win+R 的快捷键,调出运行栏,输入cmd,调出命令行工具。

hugo验证-1.png

在命令行工具中输入:

1
hugo version

hugo验证-2.png

如能正确显示版本号,即表示安装成功。

1.2 GitHub配置

  1. 注册全球最大的 同性交友 开源社区GitHub账号.

  2. 登录GitHub,并在这里创建新的仓库(repository),仓库类型设置为公开(public),点击create repository。

    在GitHub中创建仓库.png

  3. 创建完成后,我们需要复制下这个仓库的地址信息,即图中的红色部分,在之后将要用到。

    完成仓库创建.png

1.3 Git配置

Git是目前世界上最先进的分布式版本控制系统,我们安装Git,是为了将我们对本地文件的更改与GitHub进行同步,以实现对网站内容的更新。

  1. Git的安装也十分简单,只需要在官网下载,并按默认选项安装即可。

    安装程序完成后,在cmd命令行工具中输入

    1
    
    git --version
    

    出现相关版本信息,即代表安装成功。

    git 安装成功信息.png

  2. 之后,我们需要在git中存储我们的GitHub账号信息,以实现同步,我们需要在命令行输入我们上一步创建GitHub时,所用的用户名及邮箱信息:

    1
    2
    
    git config --global user.name "Your Name" //输入时不需要输入"",完成后回车
    git config --global user.email "email@example.com" //输入时不需要输入"",完成后回车
    

    这里,正常情况下,命令行不会有任何返回输出,这是正常的。

1.4 域名申请(可选)

首先需要说明,这一步对完成我们最终的目标——建立一个任何人都可以访问的网站,不是必需的。很多人可能还没有想好自己的域名,或者是还在摸索如何建站,但都没有关系,Netlify会给我们提供一个以"netlify.com"结尾的免费域名,足够让我们走得够远。

但是,如果你在一开始就想拥有一个更特别、更好记、更利于访问的域名,我们可以在3分钟内完成这个流程。

1.4.1 Godaddy还是万网

关于域名购买的网站,我最初选择的是Godaddy,中间有段时间管理公司网站用的万网,之后还是切回了GoDaddy。主要有以下的原因:

  1. 国内对个人隐私的保护是个问题,起码你在GoDaddy上,不需要验证手机;
  2. 避免被404支配的恐惧,不想让自己的写的东西,因为奇怪的原因就无法访问了;
  3. 万网对个人博客而言太重了,繁复的后台占据了很多我从没用过的功能,然而我需要的只是配置域名;
  4. 多年比较下来,Godaddy比万网的综合费用要低;
  5. 如果有一天你现在的域名不想要了,GoDaddy的域名转卖服务体验也比万网要好太多了;

1.4.2 Godaddy域名申请

我们接下里以GoDaddy为例,说明如何选购域名:

  1. 打开GoDaddy,注册账号后在首页的搜索框内,直接搜索自己想要的域名,推荐用".com"结尾的域名,因为浏览器支持性很好。不过,我最近觉得".life"结尾的也很cool。

  2. 新页面会出现最新报价,如果出现的是外国货币,可以点击页面底部,选择到"新加坡-简体中文",这样不仅会解决语言和货币单位的问题,还可以支持支付宝付款。如果筛选到了满意的域名,就可以加入购物车并结算。

    godaddy  sg.png

  3. 付款前,GoDaddy还会安利下自家的隐私保护盾、免费建站服务和Linux虚拟主机,这些我们都不需要,取消掉后直接进入购物车就好。

  4. 在购物车页面,确认自己的域名信息、购买年数和付款方式,国内一般用支付宝或银联卡,当然支付宝会方便很多。

  5. 付款。然后,这个域名就属于你了。你可以说随时在你的GoDaddy页面内查看它。

    域名设置.png

至此,我们已经完成了对Hugo、GitHub及Git的配置,我们将在下一节创建一个可以出现在浏览器中的网站。

updatedupdated2020-05-162020-05-16
加载评论