关注本站,零基础新手也能轻松搭建个人网站!
  1. 首页
  2. 宝塔面板
  3. 宝塔面板搭建静态网站教程

基于Hugo搭建个人博客网站(静态网站)

阿里云服务器优惠

重大福利提醒:【双11活动】整个11月份阿里云服务器降价了,1核2G1年58元 3年180元。这个价格买到就是赚到。180元就可以让你建站3年,全网找不到这么低的价格了。
活动地址阿里云双11降价活动(1核2G1M3年180元) 只有阿里云新用户才能参与活动。
必读事项购买阿里云服务器必读事项(省钱有绝招)
如果你不是阿里云新用户,可以找家人,亲戚的账号重新注册为阿里云新用户。一次性买满3年,我和我朋友们都是这么干的,主要是省钱。大家看了我的教程的应该都知道,多台云服务器之间的网站备份,数据迁移很容易,不用担心数据备份和迁移问题。
问题咨询:大家遇到各种问题可以微信咨询,微信号:xzjmyk 先加微信,然后拉你入交流群。

image.png
image.png

前言

搭建个人网站,以前我们一般会选择 WordPress,因为其使用范围广(据说全世界 80%的网站都是用它搭建的)、主题丰富、上手简单。

近年来,markdown 内容格式渐渐流行,我们更愿意使用 markdown 格式来写文章,写完后用静态网站生成工具把文章内容转换成 html 格式,再发布到个人网站。生成静态网站的工具中,比较优秀的有 JekyllHexoHugo 几个。

综合来看,我还是比较推荐使用 Hugo 来搭建个人网站。

安装 Hugo

MacOS 系统下,可以使用 brew 来进行安装。

brew install hugo

安装完后,可以全局使用 Hugo 命令

hugo version

创建个人网站

hugo new site myblog

进入创建的 myblog 目录,可以看到生成的目录结构长这样:

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

选择一个主题

创建完网站之后,我们可以在 Hugo 官方的 主题商店 选择一个自己喜欢的主题,并下载下来使用。

这里以 hugo-notepadium 这个主题为例,进入上一步创建的个人网站,并克隆主题到 themes 文件夹:

git clone https://github.com/cntrump/hugo-notepadium.git themes/hugo-notepadium
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
    └── hugo-notepadium

修改网站配置

修改站点配置文件 config.toml ,填写自己的网站信息和使用的主题名称,也可以根据 主题说明 里示例的配置信息来自定义网站内容。

baseURL = "https://example.com"
title = "MyBlog"
theme = "hugo-notepadium"
copyright = "©2020 my name."

创建文章

接下来我们可以开始写文章了,通过:

hugo new posts/helloworld.md

新建一篇文章。在生成的文件中使用 markdown 格式来书写文章内容。

---
title: "Helloworld"
date: 2020-04-19T23:56:47+08:00
draft: true
---

## 说明

> HelloWorld

这是内容

网站预览

执行 server 命令,对所有已发布和编辑中的文章进行预览:

hugo server -D

发布内容

写完文章,预览没问题后,可以更改文章的草稿状态 draft: false,然后编译生成静态网站内容了:

hugo -t hugo-notepadium

可以看到,几乎瞬间完成编译工作。生成的静态内容都在 public 目录下面:

public
├── 404.html
├── categories
├── css
├── index.html
├── index.xml
├── page
├── posts
├── sitemap.xml
└── tags

部署到线上

最简单的部署方式,只需要把 public 目录下的内容上传到 Github,并使用 Github Pages 创建一个站点,就可以通过:xxx.github.io 访问了,还可以绑定自定义域名。

也可以自己写一个 shell 脚本,做到每次编译完文章后自动同步 public 目录下的内容到 Github 或者自己的服务器,来保持线上站点的内容及时更新。

总结

通过前面的步骤我们看到通过 Hugo 创建静态网站是非常方便的,并且发布前的编译速度也非常快。比起传统的动态网站,可能不足的地方在于没有可视化后台来随时新增或修改 markdown 内容,但是实际上也是可以做到的,我们可以选择开发自己的主题,在主题开发过程中,我们可以通过 getJSON 来获取 API 传递的动态数据,有了这个功能,说不定就可以很好的结合动态网站与静态网站的优势了。以后有时间再讲一下如何开发自定义主题吧。

参考

原文地址: https://idoubi.cc/posts/build-site-with-hugo/

原创文章,作者:admin,如若转载,请注明出处:http://tencent.yundashi168.com/517.html

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code

2020年阿里云618大促活动(有香港主机)

1核/2G/1M---91元1年,三年275元;
2核/4G/1M---320元1年,三年960元;
2核/8G/1M---416元1年,三年1093元;
4核/8G/1M---465元1年,三年1396元;
1核2G(香港,不用备案)---249元1年,三年888元;点击直达
还有还有4核8G6M、8核16G10M配置,价格很低很低!

注意:这个价,只有新用户才能看到;老用户借用家人身份重新注册,这个价格重新注册也不亏!

我知道了