如何搭建个人博客：几种方案比较 + 个人实现

Posted 2021-09-14 kelyu0

几种搭建方案

1 第三方平台

在现有的博客网站、论坛或社区上注册个人主页。如知乎，掘金，简书，segmentFault，csdn，博客园等。

特点：无技术门槛，可专注于内容。

2 静态网站生成技术

在终端执行命令快速生成静态网站，如 Jekyll、Hugo、Hexo等。然后通过 Github Pages、Coding 等展示。

特点：通过插件可增加评论、搜索、分析等功能。有多种主题可选。在本地以特定格式书写文章，放置在指定的文件夹。每次发布或修改文章都需要重新生成和部署网站。

静态网站和动态网站

静态网站是最初的建站方式，浏览者所看到的每个页面是建站者上传到服务器上的一个 html文件，每增加、删除、修改一个页面，都必须重新对服务器的文件进行一次下载上传。

动态网页中的“动态”是指页面的动态生成。动态网页以数据库技术为基础，当浏览器请求服务器的某个页面时，服务器根据当前时间、环境参数、数据库操作等动态的生成HTML页面，然后再发送给浏览器。

3 内容管理系统 CMS

可搭建企业级网站，博客只是功能之一。如 Wordpress，Ghost 等。

特点：带有后台管理的博客系统。在后台可以管理文章、相册、主题，多用户管理等。需要配置数据库、域名、服务器（收费）。一次配置完即可以在后台界面实现各种操作。

域名 ( Domain Name ) 和网站空间 ( Hosting )

通常搭建动态网站需要购买域名和网站空间（或称主机、服务器）。静态网站所需资源较少，在Github Pages、Coding 上可以免费部署。

有了网站空间就有了ip地址，只要主机上你的服务在运行，别人就可以通过ip访问到你的网站。常见的网站空间购买形式有：共享主机，VPS，云托管和专用主机。

有了域名就可以给ip地址一个人性化的别名，允许你用 google.com 而非 216.58.213.164 来访问谷歌网站。

4 手写前端

从无到有完全手写页面，原始的可以直接写 css + html + javascript，或者用 SPA 框架如 Vue.js，React.js。然后通过 Github Pages、Coding 等展示。

特点：可以完全自定义，适合作为前端程序员的练手项目。与方案 2 类似。

5 手写前端 + 后端

自定义前端页面，自定义后台处理请求方式、数据库结构。然后配置域名、服务器。

后端语言如 php、NodeJs、Java、Python， 相关框架有Laravel、Express、Spring Boot、Django等。数据库常用的有 mysql、PostgrcSQL、Redis、MongoDB 等。

特点：可以体验完整的建站流程，迈向全栈之路。与方案 3 类似。

利用 github issues

Issue指的是项目待完成的工作，也可承担用户反馈的作用。现在有许多人也利用Issue写博客。

• 易使用易维护，不需要域名、服务器、数据库。只需要写前端页面，用issues进行后台管理。甚至可以不写前端页面，直接展示issues作为博客。
• 自带评论和收藏系统，读者的反馈可以激励作者持续创作。

自己最近在学React，所以选择了用 React.js 写前端代码并部署在 Github Pages，利用Github Issues做为后台，通过Github API完成前后端交互。

因为平时用的是Vue，所以也实现了Vue版本。

1 react-demo 2 vue-demo
3 react-code 4 vue-code

二者页面样式几乎相同。以下介绍react版本。

项目介绍

功能

• 代码高亮
• 响应式
• 文章锚点导航
• 回到顶部
• 评论跳转

极简

页面极简，代码极简。用最精简的代码，实现最需要的功能。

• 3个页面：Issue list, Issue content, About
• 5个文件：Posts.js, Post.js, PostContent.js, About.js, Catalog.js

定义成你的博客

本地预览

git clone [e-mail]:kelyu0/react-issue-blog.git
cd react-issue-blog
npm install 
npm run start

浏览器打开 http://localhost:3000 即可本地启动。

自定义

更改src/config.js中的内容，自定义成为你的博客（需要在github上有一个带issues的repository）。

export const config = {
  // Your Github UserName
  githubUserName: "kelyu0",
  // Your Github Repo Name Where You Have your issues as Blog
  githubRepo: "articles",
  // About Page links
  thirdPartySite: [
    {
      href: "https://github.com/kelyu0",
      title: "GitHub",
    },
    //Other sites ...
  ],
};

构建和部署

构建：

npm run build 生成 build 文件夹

部署：

1. 在 Github 上新建一个名为 github.your_username.io 的仓库
2. 将build文件夹之中的内容拷贝到 github.your_username.io 仓库下，推送到远程。
3. 访问 github.your_username.io