【个人网站开发 · 记录三】制定开发方案阶段 —— 技术角度分析如何去做一个个人网站

article/2025/4/23 22:05:45

前言

当下的自媒体时代，体现在一个爱折腾的程序猿身上，那么最好的方式莫过于 —— 搭建自己的个人网站。网站上可以有自己的个人介绍，技术博客，项目总结，生活分享等等。简直是COOL ！（面试神器有木有🐶）

在这里插入图片描述
就像上图这样，绝对原创设计，盗图必究！🐶

有了想法就去实现它！这里就做成一个链接合集，记录一下我本次项目的开发历程（有觉悟的童鞋建议跟我一起动手哦）：

  • 【个人网站开发 · 记录一】立项分析阶段 —— 产品角度分析如何去做一个个人网站
  • 【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站
  • 【个人网站开发 · 记录三】制定开发方案阶段 —— 技术角度分析如何去做一个个人网站
  • 【个人网站开发 · 记录四】开发阶段一 —— 原生VuePress开发（上）手动搭建个人博客网站的详细记录
🏆 制定开发方案阶段 🏆

文章目录

    • 一. 开发模式分析
      • 1.1 原生开发 or 非原生开发
      • 1.2 静态网站 or 动态网站
    • 二. 可选技术栈分析
      • 2.1 VuePress框架
      • 2.2 VuePress-Creator 2.x
      • 2.3 VuePress框架之主题（theme）介绍
        • 2.3.1 vuepress-theme-antdocs
        • 2.3.2 vuepress-theme-vdoing
      • 2.4 Gitee Pages服务
    • 三. 具体的开发方案

一. 开发模式分析

1.1 原生开发 or 非原生开发

首先一个项目本身可以根据代码是否原生分为：原生开发和非原生开发。

  • 原生开发
    借助Vue或者React等前端框架开发普通项目一样，需要自己做UI设计的主题开发，基础组件开发；往往工作量很大，后期运维复杂。
  • 非原生开发
    借助现有的开源博客框架（hexo，vuepress，halo，wordpress …）来做二次开发，避免了做重复的底层工作，开发效率更高。

1.2 静态网站 or 动态网站

网站本身也可以细分为：静态网站和动态网站。

  • 静态网站
    开发流程较简单，部署也相对容易，直接绑定好域名，把静态文件放入服务器空间即可，所以占用服务器资源也比较少；
    不足之处就是缺少交互，如用户，评论等交互功能。
  • 动态网站
    工作量大，需要自己完善前后端，服务器，配置繁琐；但是功能相对强大，用户体验较好，便于后期维护。

这样两两搭配就可以得到四种开发方案：

原生开发
（原生Vue / React开发）		非原生开发
（借助开源博客框架开发）
静态网站
（功能简单，无交互）		学习成本最低的方案
功能简单，不推荐		可借助的框架有vuepress，hexo等
难度适中，开发首选
动态网站
（功能完整，工作量大）		原生动态网站工作量最大，难度也最高
吾等小白不推荐		可借助的框架有wordpress，halo等
难度较大，进阶选择

❀ 拓展一下❀

非原生开发中可采用的主流开源博客框架，可分为动态和静态两大类：

（动态）CMS静态网站生成器
wordpress，haloHexo、vuepress、Jekyll、Hugo

具体有关他们之间的区别和联系，请参考这篇博客：

七大开源blog框架介绍

一番权衡利弊后我最终决定采用非原生（框架） + 静态网站的开发模式。

二. 可选技术栈分析

这样一来，大的技术方面分别可选的技术点就比较固定了：

  • 前端部分 —— Hexo / VuePress / Jekyll / Hugo 框架；
  • UI设计 —— 框架默认主题 / 他人优秀主题 / 原创设计主题；
  • 后台部署 —— 借助各大代码托管平台（Github / Coding / Gitee）的Pages服务；

这里大家根据自己的实际需要选择即可，下图是我的选择：
在这里插入图片描述
接下来我会给大家详细介绍这几个技术概念，但是具体的操作我会等到后续真正的开发阶段再介绍。

2.1 VuePress框架

VuePress 是尤雨溪（vue.js 框架作者）在2018年4月13日发布的一个全新的基于 vue 的静态网站生成器，设计初衷就是为了满足Vue 及其子项目的技术文档需求。

你仔细对比过之前的Vue，Vue Router，Vuex的官方文档就可以发现，他们都是一个风格的，有木有？其实他们都是用VuePress框架做的。

官网地址 —— VuePress官方文档 👈

在这里插入图片描述

后来由于VuePress框架生成的页面具有非常好的加载性能和搜索引擎优化（SEO），慢慢的越来越多的人选择使用VuePress框架来搭建自己的博客网站。

我选择VuePress框架另一个重要原因就是它是由Vue驱动的，像我之前有过Vue框架开发的基础就很好上手。
在这里插入图片描述
通常这类博客框架都会有主题系统，支持开发者开发自定义的主题。 所以我们之前做好的一套界面（UI设计）就是通过做成主题来实现。有关主题的详细介绍请接着往下阅读~

2.2 VuePress-Creator 2.x

再给大家介绍一个VuePress框架的脚手架（CLI）工具 —— VuePress-Creator。 VuePress-Creator 1.x 版本主要是用于快速创建 VuePress 项目（并不是为主题而生），为满足主题生态需要，后续又开发了 VuePress-Creator 2.x 版本。

VuePress-Creator官方文档 👈

在这里插入图片描述
补充一点：
现在我们在做一个新的方向开发时，有一个核心的思想就是借助CLI工具开发。 毕竟自己去创建项目目录结构多多少少都会出问题，不如去找找看是否有CLI工具可以帮助到你。

2.3 VuePress框架之主题（theme）介绍

要了解的是，VuePress项目在创建的时候，会有默认主题（Default）。主题的概念可以理解为一个成型的项目，有现成的UI界面设计和完整的功能。

我们要做的就是选择一个主题然后二次开发，这个主题可以选择默认的或者npm下载使用别人配置好的。 在此基础上，加入自己的博客文章，界面风格，功能点的增删等等。

要想实现我们界面原创的目的，就需要用到原生Vue去重构页面风格。
接下来推荐两个我感觉还不错的主题：

2.3.1 vuepress-theme-antdocs

vuepress-theme-antdocs官网地址 👈
在这里插入图片描述

如果使用上述的VuePress-Creator 2.x创建项目的话，过程中会多一个AntDocs (Ant Design style)的主题选择：

在这里插入图片描述
这个主题也很棒，是蚂蚁金服的官方版本，其中集成了Ant Design Vue组件库。简洁优雅，不失为一种很棒的选择！

2.3.2 vuepress-theme-vdoing

vuepress-theme-vdoing这款主题我感觉是我看了这么多主题里，功能最齐全的一款。

vuepress-theme-vdoing官网地址

在这里插入图片描述
在其官网上的介绍很详细，拓展功能真的超多，大佬！这是俺的膝盖🐶

在这里插入图片描述
大家可以先去体验一番vuepress-theme-vdoing主题的作者自己的博客，确实很牛皮！

Evan’s blog个人博客地址

在这里插入图片描述

2.4 Gitee Pages服务

后台部署这一块，毕竟不是传统意义上的动态网站开发，所以后台、域名、服务器那些就略显复杂了；直接选择各大代码托管平台（Github / Coding / Gitee）的Pages服务即可。

Pages服务是指用于搭建个人网站的静态站点托管服务。他最大的优点就是免费！（白嫖的它不香嘛🐶）

在这里插入图片描述
使用Github Pages 的好处是平台更大，方便，坏处是速度可能会有些慢、不能被国内的搜索引擎收录；Coding平台的Pages服务配置相较麻烦一点；所以权衡之下，就选择了Gitee平台。
在这里插入图片描述

三. 具体的开发方案

考虑到我们之前有做UI设计这部分工作，所以就存在这么一个问题：

我们希望的是能用到原创设计，但是你了解过vuePress框架的主题概念之后就知道，要实现这个需求，有以下两种方式：

  • 修改已有的他人优秀主题；
  • 在默认主题的基础上开发自己的主题；

可能第一种略微比第二种简单一些，但要知道这都不是一个轻松的事情。（我也想直接开发原创主题，可这实力不允许呀，一步一步来吧，少年！👊）

所以我们可以据此再制定一个具体的开发阶段：

阶段项目创建项目主题项目部署
阶段一
原生VuePress开发		原生VuePress无Gitee pages服务
阶段二
修改已有主题		VuePress-Creator 2.xvuepress-theme-antdocsGitee pages服务
阶段三
个人主题开发		VuePress-Creator 2.x默认（Default）Gitee pages服务

到这里大家就很清楚我们具体要用到什么技术，以及怎么去一步步的实现了吧 ？那么在下一篇中我们就实际来搭建一个简单的博客，可以小小的期待一下~


http://chatgpt.dhexx.cn/article/LcJ6Un70.shtml

相关文章

【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站

【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站

前言 当下的自媒体时代，体现在一个爱折腾的程序猿身上，那么最好的方式莫过于 —— 搭建自己的个人网站。网站上可以有自己的个人介绍，技术博客，项目总结，生活分享等等。简直是COOL ！（面试神器有…
阅读更多...
个人网站开发——全栈项目开发日记

个人网站开发——全栈项目开发日记

文章目录 第一种部署方式（前端打包到后端）打包前端后端 第二种部署方式（Nginx代理-推荐）nginx代理配置访问路径端口后端端口 服务器运行传到服务器在服务器后台运行 功能实现记录axios请求使后端响应数据对访问者ip获取对访问者ip…
阅读更多...
c语言：输入字符串，并判断字符串的长度

c语言：输入字符串，并判断字符串的长度

c语言中表示输入数据的类型，其格式符和意义下表所示。 格式 字符意义 d 输入十进制整数 o 输入八进制整数 x 输入十六进制整数 u 输入无符号十进制整数 f或e 输入实型数(用小数形式或指数形式) c 输入单个字符 s 输入字符串 转义字符 转义字符是一种特殊的字符常量。…
阅读更多...
C语言：字符数组的输入输出

C语言：字符数组的输入输出

目录 用printf输出 用scanf输入 用gets输入 用puts输出 用printf输出 输出方法1&#xff1a;printf 逐个字符输出。 void main(void){ char c[ ] "I am happy"; int i; for(i 0; i < 10; i){ printf("%c", c[i]); } pri…
阅读更多...
c语言---字符输入

c语言---字符输入

1 getchar() getchar接受一个字符 可输入任何字符 结束标志由自己决定,需在后面手动补全\0 输入 &#xff1a;abcd d 打印&#xff1a;6 2 fgets() fgets(); 函数原型 char *fgets(char *str, int n, FILE *stream) 输入读取&#…
阅读更多...
C语言学习（十一）之字符输入/输出

C语言学习（十一）之字符输入/输出

文章目录 一、单字符I/O&#xff1a;getchar()和putchar()二、缓冲区2.1 什么是缓冲区2.2 为什么需要缓冲区2.3 缓冲区分类2.3.1 完全缓冲I/O2.3.2 行缓冲I/O 三、结束键盘输入3.1 文件、流和键盘输入3.2 文件结尾 四、重定向和文件4.1 重定向输入4.2 重定向输出4.3 组合重定向…
阅读更多...
C语言_输出字符串和获取字符串

C语言_输出字符串和获取字符串

输出字符串和获取字符串 01——输出字符串 使用puts函数来输出字符串 使用printf函数来输出字符串 通过puts函数和printf函数都能够实现字符串输出 02——获取字符串 使用scanf函数来获取字符串 使用gets()函数来获取字符串. gets函数原型&#xff1a;char* gets(char *st…
阅读更多...
c语言之printf函数输出字符数据

c语言之printf函数输出字符数据

//用printf函数输出字符数据 #include <stdio.h> int main() {//定义两个变量char c a;int i 97;//输出变量%c以字符形式输出&#xff0c;%d以十进制整型形式输出printf("c%c,c%d\n", c, c);printf("i%c,i%d\n", i, i);return 0; } 运行结果&…
阅读更多...
在C语言中怎样定义一个字符串并输入输出

在C语言中怎样定义一个字符串并输入输出

在C语言中没有字符串类型&#xff0c;用字符数组处理字符串 字符数组定义&#xff1a;char 数组名 [常量表达式][常量表达式] 说明&#xff1a;一维字符数组&#xff0c;用于存储和处理一个字符串 。二维字符数组&#xff0c;用于同时存储和处理多个字符串 输入输出方法&…
阅读更多...
用C语言输出一个字符串的所有子串

用C语言输出一个字符串的所有子串

前言 啥是子串? 串中任意个连续字符组成的子序列称为该串的子串。 包含子串的串相应地称为主串。 ①空串是任意串的子串。 ②任意串是其自身的子串。 例&#xff1a;字符串"12"它的字串为"1",“2”,“12”,空串。共四个字串。 原理 懂了子串的概念我们…
阅读更多...
C语言 字符数据输入输出

C语言 字符数据输入输出

文章目录 C语言的标准库函数头文件 字符数据的输入输出putchar 函数&#xff08;单字符输出函数&#xff09;输出一个字符&#xff1a;输出控制字符输出转义字符 getchar 函数&#xff08;单字符输入函数&#xff09; 所谓数据的输入输出是从计算机角度出发的。 C语言本身没有…
阅读更多...
c语言输出汉字字符串,c语言怎么输出字符串

c语言输出汉字字符串,c语言怎么输出字符串

C语言输出简单的字符串&#xff0c;例如个人信息的相关字符串&#xff0c;包括姓名、出生日期、号码。我们可以通过printf()函数直接打印输出指定信息字符串。 推荐教程&#xff1a;《C视频教程》 下面我们就通过简单的代码示例&#xff0c;给大家介绍c语言输出个人信息相关字符…
阅读更多...
C语言程序——输出字符

C语言程序——输出字符

为学日益&#xff0c;为道日损 文章目录 前言一、使用C语言一般格式显示字符二、编写代码2.运行结果 总结 前言 一个标准的C语言程序具有的一般格式&#xff1a; 预处理命令和全局性的声明 main() 主函数 { 局部变量声明 语句序列 } fun1()函数1 { 局部变量声明 语句序列 } fu…
阅读更多...
C语言字符和字符串的输入与输出

C语言字符和字符串的输入与输出

C语言 一、输入单个字符 1、scanf函数输入单个字符 C语言scanf输入时缓冲区问题 scanf函数是标准输入流&#xff08;从键盘接收数据)&#xff0c;接收的数据放入输入缓冲区中&#xff0c;其中就包括在键盘输入的空格、回车这类字符&#xff0c;当你用%d接收时是不会影响的&a…
阅读更多...
【C语言--字符数据的输入输出】

【C语言--字符数据的输入输出】

1、putchar函数–字符输出函数 功能是在显示器上输出单个字符。形式为&#xff1a;putchar(字符变量); 例如&#xff1a; putchar(A);//输出大写字母A putchat(x);//输出字符变量x的值2、getchar函数–键盘输入函数 功能是从键盘上输入一个字符。形式为&#xff1a;getchar(…
阅读更多...
C语言打印输出字符串的几种方法

C语言打印输出字符串的几种方法

思路分析 知识点补充 1&#xff0c;在C语言中&#xff0c;一维数组的数组名实际上就是指向数组首项元素的指针。 2&#xff0c;如果指针p已经指向一个字符串&#xff0c;判断字符串是否结束&#xff0c;一般采用while(*p!\0)的办法。 以打印输出arr[30]"hello world&qu…
阅读更多...
C语言——字符串、打印字符串的三种方式

C语言——字符串、打印字符串的三种方式

文章目录 前言一、字符串1.字符串常量2.注意 scanf() 读取字符串例如&#xff0c;scanf() 输入中间有空格的字符串后观察打印情况 3.sizeof()函数计算字符串尺寸&#xff0c;strlen()函数计算字符串长度例子&#xff1a; 4.字符数组定义和初始化(1)传统的字符集合赋值&#xff…
阅读更多...
C语言 格式输入输出与字符输入输出

C语言 格式输入输出与字符输入输出

提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、 格式输入输出 1、格式输出——printf函数 &#xff08;1&#xff09;格式 printf("格式控制"&#xff0c;输出列表项)&#xff1b; 格式控制分为格式声明&#xff08;%和格式字符&am…
阅读更多...
jmeter+ant+jenkins-接口自动化持续集成（与之类似的postman+newman+Jenkins接口自动化持续集成）

jmeter+ant+jenkins-接口自动化持续集成（与之类似的postman+newman+Jenkins接口自动化持续集成）

jmeterantjenkins-接口自动化持续集成 jmeterantjenkins-接口自动化持续集成基本安装配置Ant配置Jmeter配置Jenkins&#xff0c;构建持续集成 jmeterantjenkins-接口自动化持续集成 Jmeter可以做接口测试&#xff0c;也能做压力测试&#xff0c;而且是开源软件 Ant是基于Java的…
阅读更多...
MAC jmeter+ant 实现接口测试并将接口测试报告以邮件的形式发出-超详细

MAC jmeter+ant 实现接口测试并将接口测试报告以邮件的形式发出-超详细

最近项目组涉及到接口测试&#xff0c;然后自己想着如何输出接口测试的报告&#xff0c;经过自己的了解&#xff0c;发现测试行业中每个公司每个测试人员输出的方式都不一样的。常规的有以下几种 使用表格的形式&#xff0c;手动去写&#xff0c;以总结的形式&#xff0c;给到…
阅读更多...
推荐文章

Copyright @ 2022~2023