零基础建站不踩坑！像当年装扮QQ空间一样创建个人技术博客网站！

WEB

前言

我一直想做个技术网站，把自己写的文章或一些想法记录一下。其实大学的时候做个一个网站，当时用的wordpress，还学了一段时间的php,数据库，那个时候比较流行用php做留言板网站，当时我做了一个简单的网站，还写了几篇文章，不过后面服务器域名过期了就没续费了，写的文章就没了……

现在有了AI，以及wordpress的成熟，搭建个人网站真的不要太简单，我这里详细介绍下我个人网站的建站教程。由于网站时上周创建的，今天写文章基本是重新走了一篇，所以某些截图可能有差异，不过我能重新走一篇，说明现在搭建网站真的非常简单！

目标

本来我是想搭建一个类似 https://ai-bot.cn/ 这样的导航网站，我发现这个网站也是基于wordpress的，只是用了导航主题，这个主题售价399，永久，其实不算贵。

但这种导航网站不太适合技术文章，我又想有那种侧边栏，最后选了好久才找到这个主题的开源版本，但这个开源主题已经没维护了。这个主题总体来看还是比较简洁的，比较适合技术网站。

先看下这个主题效果图，有侧面边栏，顶部有github地址：

选择wordpress搭建网站好处太多了，主题、插件丰富，现在建个网站就和当年装扮QQ空间一样😂，遥想当年某些同学开黄钻把QQ空间装扮得那叫一个豪华（肯定不是我，毕竟我没钱开黄钻）！web相关我不是太熟悉，但了解一个大概，比如什么后台、前端、服务器、域名这些我还是了解一点的。毕竟我当初靠卖域名赚了几百个😂，这不是重点。以下介绍整个wordpress建站过程（本文章不涉及备案、上线部署等流程，下一篇文章讲备案）。

准备工作：所需工具与资源

在开始建站之前，我们需要准备以下工具和资源：

  1. Laragon：一个集成了PHP、MySQL、Apache/Nginx等组件的本地开发环境，非常适合新手学习和搭建本地开发环境。
  2. 浏览器：推荐使用Chrome或edge,目前我主要用edege,偶尔用chrome，基本没啥太大差别。
  3. 文本编辑器（可选）：如VS Code、Sublime Text等，用于可能的代码编辑，现在各种基于vscode的AI ADE也一样，我用的codebuddy，遇到不懂的还能直接问
  4. 图片素材（可选）：网站Logo、Banner图片等，因为主题自带的某些图片可能需要替换成自己的，所以需要提前准备好。
  5. 内容素材：初始的几篇博客文章内容，这个其实无所谓，随便写几句就是一篇文章。

接下来，我们将按照完整的建站流程，一步步实现我们的技术博客网站。

阶段一：本地环境搭建

在这个阶段，我们将在本地电脑上搭建一个完整的WordPress开发环境，这样可以在不花费任何主机费用的情况下，完成网站的设计和开发。

安装Laragon

Laragon是一个功能强大的本地开发环境，集成了建站所需的所有组件，非常适合WordPress开发。

  1. 访问Laragon官网下载页面：https://laragon.org/download/
  2. 选择并下载”Full”版本（包含PHP、MySQL、Apache/Nginx、Node.js等）
  3. 运行下载的安装程序，按照向导完成安装
    1. 建议保持默认安装路径（通常是C:），不支持带空格的路径，windows的Program Files以及Program Files (x86)就有点尴尬了。
    1. 安装过程中可能会提示安装其他组件，建议全部安装
  4. 安装完成后，启动Laragon应用程序
    1. 首次启动可能需要一些时间来初始化各项服务
    1. 成功启动后，你会在系统托盘看到Laragon图标

创建WordPress项目

有了Laragon环境，创建WordPress项目变得异常简单：

  1. 右键点击Laragon托盘图标，选择”菜单 > Quick app > WordPress”

1、laragon新建wordpress界面

  • 在弹出的对话框中，输入你想要的网站名称，例如”myapp”
    • Laragon会自动将其转换为本地域名，如”myapp.test”
    • 系统会自动创建数据库、网站目录和安装文件
  • 确认创建后，Laragon会自动下载最新版WordPress并配置好环境

2、laragon服务参数设置

访问本地站点

现在，我们的WordPress环境已经准备就绪，可以访问本地站点了：

3、浏览创建的wordpress网站

注意：如果你看到”此网站无法提供安全连接”的提示，不用担心，因为本地环境使用的是自签名证书。

4、https访问提示不安全

你可以： - 使用http而非https访问（例如：http://myapp.test） - 或者在laragon启用ssl， 其实在本地我觉得可以暂时不关注这个，后期如果正式部署到服务器上再开启也不迟！

配置phpMyAdmin（可选）

phpMyAdmin是一个可视化的数据库管理工具，可以帮助你直接操作和查看WordPress的数据库：

  1. 确保Laragon已启动
  2. 在浏览器中访问：http://localhost/phpmyadmin
  3. 使用以下默认凭据登录：
    1. 用户名：root
    1. 密码：（默认为空，直接点击登录）
  4. 登录后，你可以在左侧看到Laragon自动创建的WordPress数据库。 4、启用ssl 这个工具在后续开发中可能会派上用场，比如备份迁移网站等。

阶段二：WordPress基础配置

成功搭建本地环境后，接下来我们需要完成WordPress的基础配置，让网站具备基本功能。

完成WordPress安装向导

首次访问WordPress站点时，你会看到安装向导界面：

5、首次访问需要安装

按照以下步骤完成安装：

  1. 选择你的语言（建议选择”简体中文”，便于后续操作）
  2. 在”站点信息”页面，填写以下内容：
    1. 站点标题：例如”技术杂谈”或”编程笔记”等
    1. 用户名：创建管理员账号（不要使用”admin”这种常见用户名）
    1. 密码：设置一个强密码（即使是本地环境，也养成良好习惯）** 用户名和密码最好拿个小本本记录下**

    1. 电子邮件：填写你的电子邮件地址
    1. 搜索引擎可见性：本地环境无所谓
  3. 点击”安装WordPress”完成安装

6、安装wordpress站点相关配置

安装完成后，你将看到成功提示，可以点击”登录”进入WordPress后台。

登录WordPress后台

使用刚才设置的用户名和密码登录WordPress后台：

7、登录wordpress后台

成功登录后，你将看到WordPress的仪表盘（Dashboard），这就是你管理网站的控制中心。

基本设置调整

在开始构建网站内容前，我们需要调整一些基本设置（一般情况下）：

  1. 常规设置
    1. 导航到”设置 > 常规”
    1. 确认或修改站点标题和副标题
    1. 设置正确的时区（例如”北京时间”）
    1. 选择适合的日期和时间格式
    1. 点击”保存更改”

注意以下几项，因为我是个人技术博客，不需要人注册，所以我是默认的，实际根据需求调整。

  • 固定链接设置
    • 导航到”设置 > 固定链接”
    • 选择”文章名”选项（这将创建更友好的URL结构）
    • 点击”保存更改”

这个是设置文章链接格式的，是按日期，文章名等等格式，这个看这个喜好。

  • 讨论设置
    • 导航到”设置 > 讨论”
    • 根据需要配置评论设置（是否允许评论、是否需要审核等）
    • 点击”保存更改”

国内个人网站应该是不建议开启评论或留言（能不能通过备案不说，关键是你不知道网友会发表啥内容）！！！

其他设置可以根据自己喜好修改。

完成这些基本设置后，我们的WordPress已经具备了基础功能，接下来可以开始设计网站结构了。

阶段三：网站结构设计

一个成功的技术博客需要清晰的结构和合适的设计风格。在这个阶段，我们将规划网站的整体架构。

确定网站目标与类型

首先，明确你的技术博客定位：

  • 个人技术笔记型：主要记录个人学习和工作中的技术心得
  • 教程分享型：提供系统化的技术教程和指南
  • 技术评测型：专注于技术产品或框架的评测和比较
  • 综合型技术博客：涵盖多种技术内容和形式

我这个网站主要是记录自己的技术笔记、心得以及AI相关内容。

设计网站导航与信息架构

这是我的网站的导航设计：

  • 首页：我的首页就是最新文章。
  • AI工具：分为AI图像工具、AI文本工具、AI编程工具、AI视频工具等几个模块
  • 技术杂文：暂时分为计算几何、GIS、web
  • 工具与杂谈：分为效率软件与人生杂谈
  • 关于我：自我介绍，放了张公众号二维码。

选择合适的主题

WordPress主题决定了网站的外观和部分功能，选择一个适合技术博客的主题非常重要：

  1. 导航到”外观 > 主题 > 添加”
  2. 在主题市场中搜索适合技术博客的主题

8、安装主题

  • 找到心仪的主题后，点击”安装”，然后点击”启用”
  • 安装完成后，根据主题提供的自定义选项进行基本设置

我找了一个开源主题(https://github.com/owen0o0/WebStack/archive/refs/tags/1.2024.zip)，然后稍微修改了一下图片，以下是大概界面：

9、安装完之后大概界面

安装必备插件

WordPress插件可以扩展网站功能，以下是技术博客必备的几类插件（我是一个没装，后续根据需要再增加吧）：

  • SEO优化插件
    • Yoast SEO或Rank Math：优化网站在搜索引擎中的表现
  • 安全插件
    • Wordfence Security或Sucuri Security：保护网站免受攻击
  • 缓存插件
    • WP Super Cache或W3 Total Cache：提升网站加载速度
  • 表单插件
    • Contact Form 7或WPForms：创建联系表单
  • 技术博客特定插件
    • Syntax Highlighter：代码高亮显示
    • Table of Contents Plus：自动生成文章目录
    • WP GitHuber MD：支持Markdown编写文章

安装插件的步骤：

  1. 导航到”插件 > 安装插件”
  2. 搜索所需插件名称
  3. 点击”安装”，然后点击”启用”
  4. 根据插件说明进行必要的配置

目前我为了缩减空间，删掉了所有自带插件和主题，毕竟我的29元/年的服务器空间有限。

阶段四：页面开发与功能实现

在这个阶段，我们将开始构建网站的具体页面，实现各项功能。 我只设计了两个非常简单页面，一是最新文章，作为首页，而是关于我。隐私页为默认生成的，没展示。 最近文章页面的创建，显示日期及摘要。

阶段五：内容填充与测试

在这个阶段，我们将为网站添加实际内容，并确保所有功能正常运行。

创建分类目录

首先，我们需要创建文章分类，以便组织内容：

  1. 导航到”文章 > 分类”
  2. 自行添加分类，例如”前端开发”、“后端开发”、“DevOps”等
  3. 为每个分类添加描述和别名

这是我的分类

发布示例文章

为了测试网站功能和展示效果，我们需要发布一些示例文章：

导航到"文章 > 写文章"创建至少3-5篇不同分类的技术文章确保每篇文章：

确保每篇文章：有明确的标题；分配到适当的分类；添加相关标签；设置特色图片；包含一些格式化内容（标题、列表、代码块等）

发布文章；建议关闭评论

菜单设置

现在我们需要创建网站导航菜单：

  • 导航到”外观 > 菜单”
  • 创建一个新菜单，命名为”主菜单”
  • 添加以下项目到菜单：
    • 首页
    • 博客
    • 主要分类（可以创建下拉菜单）关于我
    • 联系
  • 设置菜单位置为”主导航”或类似选项
  • 保存菜单

菜单编辑

功能测试

在进一步开发前，我们需要测试网站的基本功能，一般情况下，我们后台改动保存后，自己就能本地实时看到更新后的效果。

  1. 导航测试：
    1. 点击所有菜单项，确保链接正确
    1. 测试移动设备上的响应式菜单（目前我用的这个主题在移动端上的效果不是太好）
  2. 内容展示测试：
    1. 查看文章列表页面
    1. 打开单篇文章，检查格式和功能
    1. 测试分类和标签页面
  3. 互动功能测试这一块，根据用途看是否需要开启评论，如果是个人网站就不建议开启了。
    1. 提交评论
    1. 测试联系表单
    1. 检查社交分享按钮
  4. 响应式设计测试，PC上也能浏览器模拟移动端上的显示效果
    1. 在不同设备尺寸上查看网站
    1. 确保所有元素在移动设备上正确显示

完成这些测试和优化后，我们的网站已经准备好在本地环境中运行了。 这是我网站最后的效果，目前文章还没有几篇，后续我会增加对应的文章。其余主题设置应该是大同小异。

最后网站效果

总结

恭喜你！通过本教程装扮好了你的QQ空间！你已经成功搭建了一个专业的个人技术博客网站。从本地环境搭建到网站设计，我们已经覆盖了WordPress建站的核心流程。