搭建个人博客：从零到上线

使用 Docker 搭建个人博客：从零到上线
原文 https://mp.weixin.qq.com/s/FSYM34_vNe9wSY6mn_bG0Q

图片
图片
在当今数字时代，拥有一个个人博客不仅能展示你的技术和思想，还能为你提供一个记录和分享的平台。

Docker 作为一种流行的容器化技术，可以让你快速、轻松地部署和管理你的博客。

在本文中，我们将详细介绍如何使用 Docker 从零开始搭建个人博客。

图片

前提条件

在开始之前，请确保你的系统已经安装了以下工具：

Docker[1]
Docker Compose[2]

这些工具的安装可以参考各自的官方文档。如果您是初次接触 Docker，可以先了解一下 Docker 的基本概念和命令。

选择博客平台

我们选择了 Hexo[3] 作为我们的博客平台。Hexo 是一个快速、简洁且高效的博客框架，支持 Markdown 语法，并且有丰富的主题和插件可供选择。

环境准备

首先，我们需要为 Hexo 创建一个工作目录，并初始化一个 Hexo 项目。打开终端并运行以下命令：

mkdir my-blog
cd my-blog
npm install hexo-cli -g
hexo init
npm install

这些命令将创建一个新的 Hexo 项目，并安装所有必要的依赖项。接下来，我们将准备 Docker 环境。

克隆博客仓库

为了方便管理和部署，我们将博客项目托管在 GitHub 上。首先，创建一个新的 GitHub 仓库，然后将本地 Hexo 项目推送到该仓库。

git init
git remote add origin https://github.com/yourusername/yourblog.git
git add .
git commit -m "Initial commit"
git push -u origin master

编写 Docker Compose 文件

我们将使用 Docker Compose 来管理多个 Docker 容器。创建一个名为 docker-compose.yml 的文件，并添加以下内容：

version: '3.8'

services:
  hexo:
    image: node:14
    container_name: hexo_blog
    working_dir: /usr/src/app
    volumes:
      - .:/usr/src/app
    command: sh -c "npm install && hexo server -p 4000"
    ports:
      - "4000:4000"

这个 Docker Compose 文件定义了一个名为 hexo 的服务，使用官方的 Node.js 镜像，并将当前目录挂载到容器内。启动容器时，将安装依赖并启动 Hexo 服务器。

配置环境变量

为了方便管理配置，我们可以将一些环境变量放入 .env 文件中。创建一个 .env 文件，并添加以下内容：

BLOG_PORT=4000
然后，在 docker-compose.yml 文件中引用这些环境变量：

version: '3.8'

services:
  hexo:
    image: node:14
    container_name: hexo_blog
    working_dir: /usr/src/app
    volumes:
      - .:/usr/src/app
    command: sh -c "npm install && hexo server -p ${BLOG_PORT}"
    ports:
      - "${BLOG_PORT}:${BLOG_PORT}"

启动容器

现在我们可以使用 Docker Compose 启动容器了。运行以下命令：

1	docker-compose up -d

该命令会在后台启动 Hexo 容器。你可以使用以下命令查看容器的状态：

1	docker-compose ps

如果一切顺利，你应该会看到 Hexo 容器正在运行。

访问博客

打开浏览器，并访问 http://localhost:4000，你应该会看到 Hexo 的默认欢迎页面。当然，我们继续深入探讨如何自定义和管理你的 Hexo 博客，包括更改主题、添加插件和部署到生产环境。

自定义博客

更改主题

Hexo 有许多精美的主题，你可以在 Hexo 主题库[4] 中找到。以下是更改主题的步骤。

选择主题：在 Hexo 主题库中选择一个你喜欢的主题，并记下其安装命令或 GitHub 仓库地址。
安装主题：在你的博客根目录下运行安装命令。例如，安装 NexT 主题：

1	git clone https://github.com/theme-next/hexo-theme-next themes/next

配置主题：打开 Hexo 配置文件 _config.yml，更改主题配置：

1	theme: next

自定义主题：进入 themes/next 目录，根据主题文档自定义配置，例如更改配色、布局等。

添加插件

Hexo 提供了丰富的插件系统，可以扩展博客的功能。以下是添加插件的步骤：

选择插件：在 Hexo 插件库[5] 中选择需要的插件。
安装插件：在博客根目录下运行安装命令。例如，安装 Hexo SEO 插件：

1	npm install hexo-generator-seo-friendly-sitemap --save

配置插件：根据插件文档，打开 _config.yml 文件，添加相应的配置。例如，配置 SEO 插件：

1 2	sitemap: path: sitemap.xml

部署到生产环境

将你的博客部署到云服务器或静态网站托管服务（如 GitHub Pages、Netlify）上，可以让全世界的人访问。以下是一些常见的部署方法。

部署到 GitHub Pages

安装部署插件：在博客根目录下运行以下命令：

1	npm install hexo-deployer-git --save

配置部署插件：在 _config.yml 文件中添加部署配置：

deploy:
  type: git
  repo: https://github.com/yourusername/yourblog.git
  branch: gh-pages

生成静态文件并部署：运行以下命令：

1
2
3

hexo clean
hexo generate
hexo deploy

部署到 Netlify

创建 Netlify 帐号：访问 Netlify[6] 创建一个免费帐号。
连接 GitHub 仓库：在 Netlify 仪表盘中创建一个新站点，并选择你的 GitHub 仓库。
配置构建设置：设置构建命令为 hexo generate，发布目录为 public。
部署站点：保存并部署，Netlify 会自动从你的仓库中拉取代码并部署。

持续集成和自动部署

为了简化部署过程，你可以使用持续集成工具（如 GitHub Actions）来实现自动化部署。

使用 GitHub Actions 自动部署

创建 GitHub Actions 工作流文件：在你的仓库中创建 .github/workflows/deploy.yml 文件，并添加以下内容：

name: Deploy Hexo Blog

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '14'

    - name: Install dependencies
      run: npm install

    - name: Generate static files
      run: npm run build

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public

配置 GitHub Secrets：在你的 GitHub 仓库设置中，添加 GITHUB_TOKEN 到 Secrets 中。
推送代码：每次将代码推送到 master 分支时，GitHub Actions 会自动运行工作流并部署你的博客。

访问博客

在部署完成后，你可以通过配置的域名或托管服务提供的默认域名访问你的博客。

自定义博客

自定义域名

如果你希望使用自定义域名而不是默认的 GitHub Pages 或 Netlify 域名，你可以按照以下步骤进行设置。

在 GitHub Pages 上使用自定义域名

购买域名：你可以通过域名注册商（如 Namecheap、GoDaddy）购买一个域名。
配置 DNS：在你的域名注册商的管理控制台中，添加一个 CNAME 记录，指向 yourusername.github.io。例如：

1
2
3

CNAME record:
Name: www
Value: yourusername.github.io

添加 CNAME 文件：在你的 Hexo 项目根目录下创建一个名为 CNAME 的文件，内容为你的自定义域名，例如：

1	www.yourdomain.com

部署：再次运行 hexo deploy 命令，将 CNAME 文件部署到 GitHub Pages。

在 Netlify 上使用自定义域名

购买域名：同样，你需要通过域名注册商购买一个域名。
添加域名到 Netlify：在 Netlify 仪表盘中，进入你的站点设置，找到 “Domain management” 并添加你的自定义域名。
配置 DNS：Netlify 会提供 DNS 记录配置指导，你需要在域名注册商的管理控制台中添加相应的 DNS 记录，例如 A 记录或 CNAME 记录。

添加评论系统

一个互动的博客通常会包含评论系统。Hexo 支持多种评论系统，例如 Disqus 和 Gitalk。以下以 Disqus 为例：

注册 Disqus：访问 Disqus[7] 并创建一个新的站点。
获取 Disqus Shortname：在 Disqus 的设置中找到 Shortname，它是你站点的唯一标识符。
配置 Hexo：在 Hexo 的 _config.yml 文件中添加 Disqus 配置：

1	disqus_shortname: your-disqus-shortname

安装 Disqus 插件：如果你的主题不支持 Disqus 评论系统，你可能需要安装 Hexo Disqus 插件：

1	npm install hexo-disqus --save

添加搜索功能

为了让读者更容易找到他们感兴趣的文章，你可以为博客添加搜索功能。例如，使用 hexo-generator-searchdb 插件：

安装插件：

1	npm install hexo-generator-searchdb --save

配置插件：在 Hexo 的 _config.yml 文件中添加以下配置：

search:
  path: search.xml
  field: post
  format: html

修改主题：根据你使用的主题文档，添加搜索框和相应的 JS 代码来启用搜索功能。

优化性能

为了提升博客的加载速度和性能，可以进行以下优化：

启用 CDN

使用内容分发网络（CDN）可以加速你博客的静态资源加载。例如，使用 Cloudflare：

注册 Cloudflare：访问 Cloudflare[8] 并注册一个新账户。
添加站点：按照提示添加你的自定义域名，并更新域名注册商的 DNS 服务器设置为 Cloudflare 提供的 DNS 服务器。
启用 CDN：确保 Cloudflare 的 CDN 功能已启用，并配置缓存规则。

压缩资源

压缩 CSS、JS 和图片等静态资源可以显著减少页面加载时间。你可以使用 Hexo 插件来实现资源压缩：

安装压缩插件：

1	npm install hexo-neat --save

配置插件：在 Hexo 的 _config.yml 文件中添加以下配置：

neat_enable: true
neat_html:
  enable: true
  exclude: 
neat_css:
  enable: true
  exclude: 
neat_js:
  enable: true
  exclude:

备份和恢复

定期备份你的博客项目是个好习惯，可以防止数据丢失。你可以使用 Git 来管理备份。

使用 GitHub 备份

确保项目在 GitHub 上：之前我们已经将 Hexo 项目推送到 GitHub 仓库，这里简单回顾一下：

git init
git remote add origin https://github.com/yourusername/yourblog.git
git add .
git commit -m "Initial commit"
git push -u origin master

定期提交和推送：每次对博客进行修改后，记得提交并推送到 GitHub：

1
2
3

git add .
git commit -m "Update blog content"
git push

恢复博客

如果需要恢复你的博客，只需从 GitHub 克隆仓库并安装依赖：

1
2
3

git clone https://github.com/yourusername/yourblog.git
cd yourblog
npm install

常见问题解决

Docker 容器无法启动

如果遇到 Docker 容器无法启动的情况，可以查看容器日志来诊断问题：

1	docker-compose logs hexo

常见问题可能包括依赖安装失败、端口冲突等。根据日志信息进行相应的调整和修复。

Hexo 部署失败

如果在部署到 GitHub Pages 或其他平台时失败，可以尝试以下步骤：

检查配置文件：确保 _config.yml 中的配置正确，特别是 deploy 部分。
清理缓存和生成文件：

1 2	hexo clean hexo generate

重新部署：

1	hexo deploy

主题样式不生效

如果更改主题或自定义样式后没有生效，可以尝试以下步骤：

清理缓存和生成文件：

1 2	hexo clean hexo generate

检查主题配置：确保主题的 _config.yml 文件中的配置正确，并已保存。
重启本地服务器：

1	hexo server

进一步优化和扩展

SEO 优化

为了提高搜索引擎排名，可以进行以下 SEO 优化：

设置 Meta 标签：在 _config.yml 中配置 meta 标签，如 title, description, keywords 等。
使用 SEO 插件：例如，安装 hexo-generator-seo-friendly-sitemap 和 hexo-generator-robots 插件：

1	npm install hexo-generator-seo-friendly-sitemap hexo-generator-robots --save

并在 _config.yml 中进行相应配置：

sitemap:
  path: sitemap.xml

robots:
  useragent: *
  disallow:

分析和监控

为了了解博客的访问情况，可以集成分析工具，如 Google Analytics 或 Baidu Analytics。

集成 Google Analytics

注册 Google Analytics：访问 Google Analytics[9]，并获取跟踪 ID。
配置 Hexo：在 _config.yml 中添加 Google Analytics 配置：

1	google_analytics: UA-XXXXX-Y

集成 Baidu Analytics

注册 Baidu Analytics：访问 Baidu Analytics[10]，并获取代码片段。
配置 Hexo：将代码片段添加到主题的 _config.yml 文件中，或直接修改主题的 layout/_partial/ 文件。

社交分享

增加社交分享按钮可以提升博客的互动性和传播度。

选择插件：例如，使用 hexo-plugin-social-share 插件。
安装插件：

1	npm install hexo-plugin-social-share --save

配置插件：在 _config.yml 中添加社交分享配置：

social_share:
  enable: true
  sites:
    - twitter
    - facebook
    - linkedin

总结

通过本文的详细指南，我们从零开始搭建了一个基于 Hexo 的个人博客，并通过 Docker 容器化技术进行了管理和部署。同时，我们还介绍了如何自定义博客主题、添加插件、优化性能以及解决常见问题。希望这些步骤能帮助你顺利搭建并管理一个专业的个人博客。

使用 Docker 和 Hexo，你可以快速、轻松地创建和维护一个个人博客，不仅展示你的技术和思想，还可以为你提供一个记录和分享的平台。赶快动手试试吧！

如果你有任何疑问或需要进一步的帮助，请随时在评论区留言，我们将尽力为你解答。Happy Blogging!

END

欢迎关注我的公众号

原创技术文章第一时间推送，点赞和在看就是最大的支持❤️

图片

点分享

图片

点收藏

图片

点点赞

图片

点在看

微信扫一扫
关注该公众号

人划线