发布于 2026-01-06 1 阅读
0

每月只需​​ 5 美元,即可创建您自己的博客

每月只需​​ 5 美元,即可创建您自己的博客

写科技博客很有趣。拥有自己的博客可以帮助他人,提升技能,甚至可能帮你找到工作。

在 Medium、Dev.To 等其他网站上写博客真的很有趣。我当然也会这么做,你现在就在 Dev.To 上读到我的文章。但是拥有自己的网站来管理内容也很重要。这能让你完全按照自己的想法来做,并打造个人品牌。

按照本教程操作,你每月只需 5 美元即可拥有自己的静态托管博客。你只需要一个域名。

创建新机器

我们将首先在Digital Ocean上创建一个虚拟机(droplet) 。

点击“创建”,然后选择“水滴”。

如何创建静态博客

我选择使用 FreeBSD,如果你决定选择 Linux,操作步骤也大同小异。

选择每月 5 美元的方案:

如何创建静态博客

如果这是个新博客,它的容量足够大。请选择离您最近的数据中心区域。

我使用 SSH 进行身份验证。这意味着您需要在本地计算机上生成密钥,然后将密钥上传到 Digital Ocean。但这是一种更安全的计算机通信方式。

如何创建静态博客

注: 这里有一篇关于如何在 Windows、Linux 或 Mac 中生成 SSH 密钥的优秀教程。

添加您的 SSH 密钥,即可开始使用。

如何创建静态博客

创建 DNS 条目

你需要创建一些 DNS 条目。我使用Route 53作为 DNS 服务商,但你也可以使用Digital Ocean为你的服务器配置 DNS。

如何创建静态博客

请确保您的域名已映射到您的服务器/实例的 IP 地址。

登录您的系统

现在我们登录到服务器。因为我使用的是FreeBSD系统,所以我要更新一下它。

freebsd-update fetch install
Enter fullscreen mode Exit fullscreen mode

接下来我们将安装 Git 和 Nginx。

pkg install git
pkg install nginx
Enter fullscreen mode Exit fullscreen mode

然后我们将运行 rehash,以便命令可用。

rehash
Enter fullscreen mode Exit fullscreen mode

添加防火墙规则

您需要为防火墙设置一些规则。

使用以下命令修改您的sysrc文件:

sysrc nginx_enable="YES"
sysrc firewall_enable="YES"
sysrc firewall_type="workstation"
sysrc firewall_myservices="22/tcp 80/tcp 443/tcp"
sysrc firewall_allowservices="any"
Enter fullscreen mode Exit fullscreen mode

然后启动防火墙。

sudo nohup service ipfw start >&/tmp/ipfw.log
Enter fullscreen mode Exit fullscreen mode

启动 Nginx:

sudo service nginx start
Enter fullscreen mode Exit fullscreen mode

应该看看这个:

如何创建静态博客

现在 Nginx 已通过 HTTP 连接在您的机器上运行。

设置您的开发机器

我们将使用 Hugo 生成静态网站。根据您的开发机器环境,安装过程略有不同,因此与其为每个平台(Windows/Mac/Linux/BSD)重复安装说明,不如直接按照此处的说明操作:

你需要在系统上安装 Golang 。

然后安装 Hugo

请确保这台机器上也安装了Git 。

创建一个新的 Hugo 网站

现在,我们来创建一个新网站。我的网站叫做“sillyblog”,所以我运行以下命令:

hugo new site sillyblog
Enter fullscreen mode Exit fullscreen mode

Hugo 不会为你的博客提供默认主题,所以你需要找到一个你喜欢的主题。

然后,您只需将主题克隆到您刚刚创建的文件夹内的 /themes 文件夹中即可。

我使用的是“Hugo Dusk”主题,所以界面看起来是这样的:

cd sillyblog/themes
git clone https://github.com/gyorb/hugo-dusk.git
Enter fullscreen mode Exit fullscreen mode

现在,我需要将主题添加到我的 config.toml 文件中。这取决于你安装的主题名称。大多数情况下,它与 .git 文件的名称相同。

echo 'theme = "hugo-dusk"' >> config.toml
Enter fullscreen mode Exit fullscreen mode

现在让我们创建第一篇帖子:

hugo new posts/my-first-post.md
Enter fullscreen mode Exit fullscreen mode

注意,文件名构成了 URL。所以我的 URL 将是:

domain.com/posts/my-first-post/

这一点对于搜索引擎优化(SEO)来说非常重要。

打开文件 content/helloworld.md

它看起来会是这样:

---
title: "Helloworld"
date: 2020-02-29T00:24:30-08:00
draft: true
---
Enter fullscreen mode Exit fullscreen mode

您可以在这里编辑您的第一篇帖子。

准备发布时,您需要将 draft: true 更改为 draft: false。

hugo serve
Enter fullscreen mode Exit fullscreen mode

太好了,现在我们的本地机器上已经运行了一个博客。

如何创建静态博客

您可以取消服务,要生成一个新网站,只需输入以下内容即可:

hugo
Enter fullscreen mode Exit fullscreen mode

您的网站将生成并位于“公共”文件夹中。

设置部署

创建 GitHub 仓库

返回博客的 /public 目录(我的博客是“sillyblog”)。

初始化存储库。

git init
Enter fullscreen mode Exit fullscreen mode

然后,进行你的第一次提交。

git commit -m "first commit"
Enter fullscreen mode Exit fullscreen mode

您需要在 GitHub 上添加博客的远程仓库地址。我的博客仓库名称是“simpleblog”,但您的名称会有所不同。

git remote add origin https://github.com/JeremyMorgan/simpleblog.git
Enter fullscreen mode Exit fullscreen mode

然后将文件上传到 GitHub。(注意:如果您愿意,可以省略上传到 GitHub 的步骤,直接上传到服务器。)

git push -u origin master
Enter fullscreen mode Exit fullscreen mode

现在你应该可以看到你的文件已经上传到你的Github仓库了。

设置我们的服务器

现在我们需要设置服务器。创建一个文件夹用于存放新网站,并将“example.com”替换为您的网站名称。

mkdir -p /usr/local/www/example.com/html
Enter fullscreen mode Exit fullscreen mode

请务必将 Nginx 目录的所有权更改为 www。

sudo chown -R www:www /usr/local/www/example.com
Enter fullscreen mode Exit fullscreen mode

现在您可以将您的网站直接克隆到该文件夹​​中。(每次发布时都需要这样做。)

git clone https://github.com/JeremyMorgan/simpleblog.git /usr/local/www/example.com/html/
Enter fullscreen mode Exit fullscreen mode

最后,您需要编辑 nginx.conf 文件,以便将您的域名指向该文件夹。

vi /usr/local/etc/nginx/nginx.conf
Enter fullscreen mode Exit fullscreen mode

并添加以下内容:(将我的域名替换为你的域名)

server {
    access_log /var/log/nginx/sillyblog.jeremymorgan.com.access.log;
    error_log /var/log/nginx/sillyblog.jeremymorgan.com.error.log;
    listen  80;
    server_name sillyblog.jeremymorgan.com;

    location / {
        root /usr/local/www/sillyblog.jeremymorgan.com/html;
        index index.html index.htm;
    }
    }
}
Enter fullscreen mode Exit fullscreen mode

这很可能位于文件的底部附近:

如何创建静态博客

现在保存文件并重新加载 Nginx:

service nginx reload
Enter fullscreen mode Exit fullscreen mode

瞧!我们的网站上线啦!!

但它使用的是80端口的HTTP协议。这可不行。

安装 Let's Encrypt 以启用 SSL

我们将使用Let's Encrypt安装证书。Let's Encrypt 的一个优点是证书是免费的(虽然你应该捐赠),而且 certbot 几乎可以为你完成所有的配置。

您需要安装certbot:

pkg install py37-certbot-dns-digitalocean
pkg install py37-certbot-nginx
Enter fullscreen mode Exit fullscreen mode

然后,使用 --nginx 标志运行它:

certbot certonly --nginx
Enter fullscreen mode Exit fullscreen mode

它会问你一些问题:

如何创建静态博客

然后它会自动修改你的 Nginx 配置:

如何创建静态博客

终于,网站上线了,而且是https!

如何创建静态博客

结论

在本教程中,我们将:

  • 设置 Digital Ocean 虚拟机
  • 已安装 Nginx
  • 我们在本地机器上安装了 Hugo。
  • 使用 Hugo 创建了一个新网站
  • 使用 Git 将其推送到我们的新服务器。

工作流程可能会有所不同,但这足以让你入门。在这个工作流程中,我们在本地机器上构建工件,并使用 Git 存储这些工件,然后将它们移动到服务器。另一个(更好的)选择是将整个 Hugo 文件夹存储在 Git 仓库中,然后将其提交到服务器,之后再构建工件。

我不想让这篇教程内容太多,但在以后的教程中,我们会设置类似的东西,并对其进行一些 CI/CD 调整。

如果你设置好了,请告诉我!我一直很想收到关于教程的反馈。

文章来源:https://dev.to/pluralsight/create-your-own-blog-for-5-dollars-a-month-1gnk