How to build a Blog ?

这里搭建的过程可以分为如下几步:

1 , 了解网站前端 html, css, js

2，购买云服务器并配置。（如果你想全中国的人都能访问的你的网站的话，你得到阿里云，腾讯云等云服务器商那里购买一台自己的服务器，可以选配置最低的，大约400多块钱一年吧，我是大一的学生，因为有学生认证，就有学生优惠）

3，在云服务器上配置好tomcat。（关于什么是tomcat，以及如何配置）

4，学会运用框架。（它能帮你节约很多时间）

5，购买域名。

6，对内容进行迁移，长期优化运维你的网站

1，HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

2，CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3，JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

二，购买云服务器并配置。

购买云服务器（如阿里云）可让全国用户访问你的网站。具体购买细节可自行搜索了解。

购买后需在安全组配置中添加8080端口和80端口。https://www.aliyun.com/

三，在云服务器上配置好tomcat。

tomcat是一个轻量级Web应用服务器，适合初学者使用。你可以下载配置好的tomcat，复制到云服务器后运行命令行脚本即可。

服务器启动后，将web项目复制到webapp目录并重命名为ROOT。之后用户即可通过云主机IP访问网站。

注意：服务器启动后需等待ip同步完成（约需几十秒）才能访问。

作为一个大学生，搭建个人的网站有什么用呢？

我能想到有下面的这些。

1，搭建 Blog个人博客。它用来展示自己，表达自己的一些思想，或者用来负载想要一些宣传的内容，上传一些文件提供下载，此外还能记录自己的人生，把自己遇到的，开心的，难过的，事情都能写成一篇小短文添加到自己的博客上，不挺好嘛。

2，搭建一个聊天室。叫来朋友，直接上网聊天。这可是全国范围内都能访问的聊天室，偶尔还能碰到几个不认识的人来谈谈的想法，多交了几个朋友。

3，把它做成个人简历。我觉得这个一个比较主流的做法，我以后投简历就打算用这种方式，而不是用一个word，PPT等，我觉得这能比较完整的展示个人经历和个人所取得的成就。或许这还能让人眼前一亮。

4，挑战自己。在搭建网站的过程中，肯定会遇到许多困难，而每天进步一点，把不会的东西搞懂一点，也许自己想要做的事情真正做起来并没有那么难。或许前一天还不懂编程，今天已经会写for循环了，或许昨天还不懂框架，今天就已经会运用了。

5，营销。以后等技术成熟了，可以实现点特定的功能，满足一些特殊的人群，赚点流量，投个广告，赚点费用，来实现自己的一笔收入。

6，在折腾中学习...... 记录自己，生活的仪式感。

https://naccl.top/

1.wordpress 2. Hexo 3. Halo halo博客框架：用Spring Boot 和vue开发的前后端分离的博客系统。

基础知识：

⭐登录页面 ⭐仪表盘 ⭐内容发布 ⭐

Vercel：一项对开源项目免费的托管服务。 Vercel 是一项集部署发布、服务托管、证书部署等等为一体的自动化的托管服务器。简单而言，我们只需要知道：

Vercel 面向开源项目是免费的（意味着其实你不需要花费任何钱）；

Vercel 能够自动将开发模式下的代码「转变」为可以对外提供服务的网页，可以部署独立域名、带安全证书的网站。

折腾博客多年，尝试过 WordPress、Hexo等各种博客系统。然而在写作过程中最重要的应该是养成内容持续输出的习惯；软件平台仅仅是一个辅助，反复折腾搭建系统显得本末倒置。

【需要的工具及网址】

Plan A： WordPress + sakura 主题框架

WordPress官网：https://cn.wordpress.org/

Sakurairo主题github官网：https://github.com/mirai-mamori/Sakurairo

Sakurairo主题官方博客，使用教程：https://docs.fuukei.org/demo/

参与交流 QQ 群：784229925

参考网站：https://2heng.xin/theme-sakura/

gitee 项目源：https://gitee.com/mashirozx/Sakura#https://gitee.com/link?target=https%3A%2F%2F2heng.xin%2Ftheme-sakura%2F

主题升级美化：https://blog.csdn.net/m0_46202073/article/details/106558344

Plan B: Hexo 框架 / Halo 框架 + github.io 方案

参考网站： https://2024.igem.wiki/hkust-gz/

轻量级、高效的全栈开发框架

基础架构：前端：Halo采用了现代化的前端技术栈，如React和Vue.js，使得开发者可以利用这些流行的库和框架创建交互丰富的用户体验。后端：基于Node.js的Express框架，提供了强大的路由处理和中间件系统，实现了快速响应和服务端渲染。数据库：Halo支持多种数据库适配器（如MySQL, PostgreSQL, MongoDB等），方便开发者选择最适合其项目的数据存储方案。

Plan C : 基于 Notion 子框架 + Vercel

文字教程：https://www.yuque.com/devindai/anything/tgwqny Cloudflare：https://dash.cloudflare.com/login 生成代码：https://fruitionsite.com/ 参考网站：https://www.devindai.com/ www.marklin.life

others tips：

宝塔面板

Plan C 适合的人群：如果你有自己写博客的习惯，需要一个网站来展示自己的博客，同时，你又不想要进行复杂的开发工作，那么本篇文章将教给你一个最简单的博客搭建方式，仅需要一些配置修改即可以搭建好你的个人博客网站。

可选子框架：1. NotionNext 2. Nobelium

NotionNext帮助手册： https://docs.tangly1024.com/about

Nobelium帮助手册：https://sspai.com/post/66678

模板文件：

nextjs-notion-starter-kit-main.zip

533.6KB

Notion 博客模板： https://transitive-bs.notion.site/Next-js-Notion-Starter-Kit-Template-7875426197cf461698809def95960ebf

搭建步骤

1. Fork Github上项目到个人仓库

搭建上是基于Github上的nextjs-notion-starter-kit项目，这个项目是基于Next.Js进行开发的，对于我们来说，我们不用进行二次开发即可运行我们自己的项目。

首先我们进入到Github上项目的页面：

nextjs-notion-starter-kit项目主页

Fork之后我们可以在自己的仓库中看见这个项目：

fork到自己的主页

接下来，我们只需要修改一个配置文件便可以完全完成我们的开发工作。点击site.config.js文件进入编辑功能，这个文件对应着我们的博客网站上的一些内容的构建：

配置文件名称

我们可以看到配置文件的内容是关于我们构建博客的一些基本要素，其中最重要的要素是rootNotionPageId 这个参数的配置，这个参数对应的就是我们Notion中的页面ID，后面章节将讲述如何获取这个参数。

下图中描述了我们涉及的一些需要自己配置的参数信息，可以在修改后提交到我们的项目中。



import { siteConfig } from './lib/site-config'

export default siteConfig({
  // the site's root Notion page (required)
  rootNotionPageId: '613ee3afda7b406c9cac7ba2965502cc',

  // if you want to restrict pages to a single notion workspace (optional)
  // (this should be a Notion ID; see the docs for how to extract this)
  rootNotionSpaceId: null,

  // basic site info (required)
  name: 'Chaodi Tang Blog World',
  domain: 'chaodit.tech',
  author: 'Chaodi Tang',

  // open graph metadata (optional)
  description: 'My Blogs.',

  // social usernames (optional)
  twitter: 'transitive_bs',
  github: 'transitive-bullshit',
  linkedin: 'fisch2',
  // mastodon: '#', // optional mastodon profile URL, provides link verification
  // newsletter: '#', // optional newsletter URL
  // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`

  // default notion icon and cover images for site-wide consistency (optional)
  // page-specific values will override these site-wide defaults
  defaultPageIcon: null,
  defaultPageCover: null,
  defaultPageCoverPosition: 0.5,

  // whether or not to enable support for LQIP preview images (optional)
  isPreviewImageSupportEnabled: true,

  // whether or not redis is enabled for caching generated preview images (optional)
  // NOTE: if you enable redis, you need to set the `REDIS_HOST` and `REDIS_PASSWORD`
  // environment variables. see the readme for more info
  isRedisEnabled: false,

  // map of notion page IDs to URL paths (optional)
  // any pages defined here will override their default URL paths
  // example:
  //
  // pageUrlOverrides: {
  //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
  //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
  // }
  pageUrlOverrides: null,

  // whether to use the default notion navigation style or a custom one with links to
  // important pages
  navigationStyle: 'default'
  // navigationStyle: 'custom',
  // navigationLinks: [
  //   {
  //     title: 'About',
  //     pageId: 'f1199d37579b41cbabfc0b5174f4256a'
  //   },
  //   {
  //     title: 'Contact',
  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
  //   }
  // ]
})

2. Copy Notion上对应的博客模板

在项目配置好后，我们对于博客网站的编码任务就已经是基本完成了，下面我们需要做的就是绑定我们Notion页面和我们项目访问主页的一个关系。

本次我们使用的模板就是Github项目上提供的一个基础模板（Next-js-Notion-Starter-Kit-Template），后续其实也可以自己写一个或者到Notion Template中去搜索模板。

进入页面后点击Duplicate将页面复制到我们自己的Notion空间中。

Notion Blog模板页面，点击Duplicate

复制到自己的Notion空间中

现在这个页面就是我们博客网站的主页面，我们需要将页面与我们的项目配置进行绑定，也就是将页面的PageId填入到步骤1的配置文件当中去。在Notion页面点击Share，选择Publish，点击Publish to web。

将页面对外发布

查找到对外发布的页面的rootNotionPageId

此时我们会得到一个链接，将我们的链接复制出来，上面所得到的链接如下：https://nostalgic-height-beb.notion.site/Next-js-Notion-Starter-Kit-Template-1568ef5d62864eabbe4cbad327387865?pvs=4，链接中我们需要关心的就是156开头的这一串数字（1568ef5d62864eabbe4cbad327387865），这串数字对应的就是我们的pageId，将这个ID复制到我们步骤1对应的rootNotionPageId 参数中即可完成我们Notion页面与项目页面的配对。