个人博客的开发流程

2023-10-28 一些代码 0 评论 47 浏览量

个人博客的开发流程

2023-10-28 一些代码 0 评论 47 浏览量

前言

网上有许多开源博客框架，可以让我们快速的搭建自己的个人网站。常见的博客框架有：Hexo，Typecho，Wordpress，Halo，Solo，Vuepress。这些都可以大大简化我们搭建个人网站的流程，并且可以自定义我们喜欢的主题。个人网站的好处就是可以让我们可以更加自由的写自己的文章，如果有兴趣开发自己的博客框架，就可以参考以下的建站流程

开发个人博客

开发前提：系统需要安装Node环境，直接下载长期维护版，因为这个版本可能比较稳定。有时候版本过高会导致奇奇怪怪的问题，安装的时候直接下一步就好。个人比较推荐v14.8.0，因为我们在开发的过程中，可以需要用到node-sass的依赖包，执行yarn install的时候就会报错，两种方式解决，一是将node-sass改成sass【官方推荐】，二是将node的版本降低，经过测试v16是会报错的。开发工具的话可以选则vscode或者webstorm，webstrom可以使用教育邮箱申请，或者去TB购买账号后台的技术栈使用的是Java，因此我们还需要安装jdk，通常使用的jdk1.8国内镜像下载地址版本。开发工具下载IntelliJ IDEA，可以选择社区版，这个版本是免费的。下载Spring Assistant插件，构建springboot项目，安装pom相关依赖，运行项目

如果碰到依赖包下载特别慢的情况，可以重新配置maven的下载镜像，配置maven的settings.xml文件即可

# git配置用户名
git config --global user.name "fangziping"
git config --global user.email "768449566@qq.com"
# 检查node版本
node -v
# 全局安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 全局安装yarn
npm install -g yarn --registry=https://registry.npm.taobao.org
# yarn 路径并添加到 $PATH 在Linux中
export PATH=/usr/local/lib/node_modules/yarn/bin/:$PATH
echo $PATH
# 安装vue-cli
yarn global add @vue/cli
# 创建vue项目
vue create hello-world
# 运行项目
yarn install
yarn serve
# 检查jdk版本
java -version
shell

前端主要技术栈：vue + vue-cli + vue-router + vuex + axios

vue：渐进式的JavaScript的框架
vue-cli：Vue.js 开发的标准工具
vue-router：Vue.js 官方的路由管理器
vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
axios：易用、简洁且高效的http库

前端主要还是使用上诉的依赖包，还包含一些辅助依赖包，如@fancyapps/ui，可以有很好的文章图片切换的友好交互；@moefe/vue-aplayer一款音乐播放器的插件，可以显示歌词以及音乐的播放；js-cookie可以简化cookie的操作流程；live2d-widget卡通人物插件，美化博客相关页面等等；具体可以参考开源代码中的package.json文件。

后端主要技术栈：springboot + mybatis + mysql

Spring Boot：解决企业应用开发的复杂性后端开发框架
MyBatis：MyBatis 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。
MySQL：关系型数据库管理系统

如果使用springboot做web开发服务端，只需要引入web这个starter依赖即可，springboot使用的是内置的tomcat作为web服务器，开发服务端主要有以下几个步骤：

配置数据库链接池

我个人使用的是阿里的druid数据库连接池，引入pom文件中的依赖

<!-- 阿里druid数据源 -->
<dependency>
 <groupId>com.alibaba</groupId>
 <artifactId>druid</artifactId>
 <version>1.1.22</version>
</dependency>
xml

新建在\src\main\resources下application.yml文件添加数据库的相关配置

spring:
  devtools:
    restart:
      log-condition-evaluation-delta: false
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://127.0.0.1:3306/zip_blog?serverTimezone=UTC&&characterEncoding=utf-8&&SSL=true
    driver-class-name: com.mysql.cj.jdbc.Driver
    initialization-mode: always
    schema:
      #- classpath:sql/user.sql
      #- classpath:sql/article.sql
      #- classpath:sql/link.sql
      #- classpath:sql/tag.sql
      #- classpath:sql/zip_blog.sql
    type: com.alibaba.druid.pool.DruidDataSource
    #数据源其他配置
    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
    #配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
    filters: stat,wall,slf4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
yml

spring:
  devtools:
    restart:
      log-condition-evaluation-delta: false
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://127.0.0.1:3306/zip_blog?serverTimezone=UTC&&characterEncoding=utf-8&&SSL=true
    driver-class-name: com.mysql.cj.jdbc.Driver
    initialization-mode: always
    schema:
      #- classpath:sql/user.sql
      #- classpath:sql/article.sql
      #- classpath:sql/link.sql
      #- classpath:sql/tag.sql
      #- classpath:sql/zip_blog.sql
    type: com.alibaba.druid.pool.DruidDataSource
    #数据源其他配置
    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
    #配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
    filters: stat,wall,slf4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500

配置完成之后，可以写一个配置类，可以在网页https://zipblog.top/api/druid/login.html上进行数据的监控

前后端代码托管

前后端的代码均托管在码云上，使用docker进行项目的自动化部署前台、后台、管理端、docker部署vue项目，压力测试工具。运行yarn build将生成的dist文件夹与编写的Dockerfile文件拷贝到云服务器，在服务器根目录新建文件夹nginx，然后在nginx目录下依次创建conf，conf.d，html，logs，ssl，cache目录，将Dockerfile放在nginx下 cd /nginx && docker build -f Dockerfile -t zipblog .将生成的dist目录下所有的文件放到html目录下，这样即可将Vue项目打包成Docker镜像。执行docker rmi [镜像id]即可删除镜像。首次打包镜像可能会慢，因为要下载部分依赖，生成1.1版本的时候就会很快。

FROM nginx
COPY conf/nginx.conf /etc/nginx/nginx.conf
COPY conf/conf.d /etc/nginx/conf.d
COPY html/ /usr/share/nginx/html/
COPY logs/ /var/log/nginx/
COPY conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY ssl/ /ssl/
COPY cache/ /nginx/cache
shell

镜像打包好后即可运行，生成对应的容器

docker run  -p 80:80 -p 443:443 --name zipblogclient \
-v /nginx/ssl:/ssl/ \
-d --rm zipblog
shell

-d 表示后台运行 –rm 表示容器启动失败会自动删除启动记录，不会生成日志 -v 表示目录挂载 –name 表示容器的别名

docker logs zipblogclient可以查看容器启动过程中的日志，docker exec -it d85fd3a937f4 /bin/bash可以进入容器exit表示退出容器

将打包好的镜像上传打dockerhub中，执行docker login -u [用户名]，然后输入密码，即可成功登录docker，然后需要将我们打包好的镜像取个别名docker tag 074092bbcdca xxx/zipblog:1.1，执行docker push xxx/zipblog:1.1，即可将镜像推送的远端的dockerHub，流程类似github。

后台Springboot代码打包docker镜像流程类似，也是用相同的方式将打包好的镜像推送到DockerHub。

FROM java:8
MAINTAINER zipingfang<768449566@qq.com>
COPY *.jar /app.jar
CMD ["--server.port=8090"]
EXPOSE 8090
ENTRYPOINT ["java","-jar","/app.jar"]
bash

部署线上

我们可以在阿里云购买Linux系统的ECS云服务器，进行项目构建的流程。安装好环境后，我们将执行以下的命令构建项目，管理端可以直接使用对应的UI页面。我们可以使用Docker的方式部署，也可以使用Jenkins进行自动化打包的方式部署。

如果我们使用sass这个css扩展语言，需要执行以下的代码，但是这块有个坑，它要求系统要安装python2.7，否则在安装依赖的时候，会报错。并且如果项目使用了预渲染，打包生产环境的时候也会报错。windows常用的解决方式，Vue的预渲染可能导致Linux环境打包生产模式失败。

npm i node-sass sass-loader style-loader -D
# 运行环境 安装jdk
yum install java-1.8.0-openjdk java-1.8.0-openjdk-devel.x86_64
shell

使用Docker的方式部署

# 最新的系统不需要update
yum update 
# 安装docker
yum install docker
终止8080端口
netstat -tunlp|grep 8080
kill -9 pid
# 后台运行jar包 自定义端口
nohup java -jar zip-blog-serve-0.0.1-SNAPSHOT.jar --server.port=8080 &
# 防火墙的检查
systemctl status firewalld
service firewalld stop
# 云服务器需要装的node,git,nginx环境
yum install -y nodejs
yum install -y git
docker pull nginx
# 安装删除工具
cnpm install rimraf -g 
# 使用命令删除 
rimraf node_modules
# jarb上传工具
yum -y install lrzsz
rz -y
\cp -rf dist/* /nginx/html/web/ 
# 8000 端口运行vue
yarn serve --port 8000
shell

可以使用Xshell登录到阿里云的服务器，安装docker。执行docker images即可出现我们打包好的镜像，然后docker run执行我们的镜像生成容器。我这里有个坑，我已经将宿主机的/ssl目录下的证书拷贝到Docker镜像中了，但是还是报错，无法加载

于是我单独挂载ssl目录就成功了

docker run  -p 80:80 -p 443:443 --name zipblogclient \
-v /nginx/ssl:/ssl/ \
-d --rm zipblog
bash

Docker启动的的服务如下

使用Jenkins方式进行部署

如果不使用docker部署，可以使用jenkin是的方式进行自动化部署。可以使用docker安装jenkins镜像，也可以直接下载jenkins客户端进行项目部署。默认的安装目录是D:\Program Files\Jenkins。如果发生启动失败的情况时，win+r->services.msc，找到jenkins服务，即可启动。初始化的时候，可以通过下面的脚步找到初始密码。推荐使用 docker的方式安装。

cat /Users/isaacho/Documents/application/docker/jenkins_home/secrets/initialAdminPassword
bash

安装ssh插件

点击Manage Jenkins -> Manage Plugins[插件管理]，搜索Publish Over SSH,并安装

接下来就是配置ssh，点击Manage Jenkins -> configure system[配置]，拉到最下方找到SSH Servers，进行基础配置，自定义名称，主机host，用户名，然后点击高级，输入密码，端口号默认是22，最后点击 Test Configuration,显示success则说明配置成功，点击保存。

安装node插件

点击Manage Jenkins -> Manage Plugins[插件管理]，搜索node,找到NODEJS并安装

点击Manage Jenkins -> Global Tool Configuration，点击新增NODEJS，选择相应的版本即可。如果之前已经配置过了，就会显示NODE安装eg:NodeJS_V12.20.0

返回首页点击新建item，选择Freestyle project，选择github项目，输入项目的url地址，选择Throttle builds，构建数选择10，源码管理，选择git，如果是私有仓库，就输入用户名密码即可。点击Provide Node & npm bin/ folder to PATH，选择我们配置的node版本，构建node环境。

如果是mac的电脑，就选择Execute shell 如果是windows电脑Execute Windows batch command windows电脑是不支持一行执行多条命令脚本，但是可以使用&&

# windows下jenkins的脚本运行
npm install -g yarn --registry=https://registry.npm.taobao.org &
yarn install &
yarn build
shell

构建后操作，选择我们配置ssh服务，选择name，源文件我们配置成dist/**，远程目录[Remote directory]我们选择zipBlog，然后我们云服务器就会生成zipBlog文件夹，Exec command写入脚本\cp -rf zipBlog/dist/** /nginx/html/web，nginx不修改配置文件，不需要重启服务。

Maven的配置

在官网下载好对应的maven包后，点击Manage Jenkins -> Global Tool Configuration，新增Maven，命名eg:maven_v3.6.1，不勾选Install automatically自动安装，MAVEN_HOME可以直接指向本地的安装目录，比方我将安装包解压后放到D:\apache-maven-3.6.1，点击保存，即可配置完成。

JDK的安装

点击Manage Jenkins -> Global Tool Configuration，新增JDK，命名eg:jdk_v8u11，选择相应的jdk版本后，选择自动安装，即可。这块由于网络的原因会安装失败。因此我们还是可以使用本地安装的方式，将JAVA_HOME指向本地安装路径D:\Program Files\Eclipse Adoptium\jdk-8.0.312.7-hotspot

接下来就是构建一个Maven的项目，点击Manage Jenkins -> Manage Plugins[插件管理]，点击可选插件，搜索Maven Integration，安装即可。返回jenkins首页，点击新建item->输入项目名称->构建一个maven项目。选择github项目，输入项目的url地址。JDK选择(System)，勾选触发器Build whenever a SNAPSHOT dependency is built，Build中填写pom.xml，Goals and options中添加clean install，Post Steps使用Run only if build succeeds，Source files中填写target/*.jar，Remote directory使用newZipBlog。

#!/bin/bash
function killproject()
{
    #由于我这边多个项目jar包名一致了，所以并没有用 ps -ef | grep jar包名 来查进程id，而是通过端口号来查的
    project_pid=$(netstat -lnp | grep 8090|awk '{print $7}'|cut -d/ -f1)
    if [  $project_pid > 0 ];then
        kill -9 $(netstat -lnp | grep 8090|awk '{print $7}'|cut -d/ -f1)
    else
        echo "项目未启动，直接启动"
    fi
}
function start_project()
{
    cd /root/newZipBlog/target
    nohup java -jar zip-blog-serve-0.0.1-SNAPSHOT.jar --server.port=8090  &2>1 &
}
killproject
start_project
shell

接入云评论

常见的云评论有畅言，Twikoo评论，gittalk，Valine等。接入畅言，感觉有广告，并且需要注册登录才能评论。个人还是想接入Twikoo，但是这个似乎要收费，api一天只能调用500次，很快就会用完。这里介绍Twikoo的云函数一键部署。云函数是基于腾讯云的，直接进入环境-安全配置，配置云函数。点击查看全部环境，进入环境总览，就可以看到，环境id，以及环境名称。创建环境->空白函数->包年包月->输入环境名称->运行环境Nodejs 10.15，内存128M->确定，然后点击右侧云函数，新建云函数。去掉实例代码，输入以下代码。

exports.main = require('twikoo-func').main
js

进入云函数详情，点击函数代码->文件->新建文件package.json中输入{ "dependencies": { "twikoo-func": "1.5.10" } }即可。以下是在nuxt中使用，yarn add twikoo@1.5.10，这个界面比较好看，还可以自定义icon。

const twikoo = require('twikoo')
twikoo.init({
  envId: '***',
  el: '#tcomments',
  region: 'ap-shanghai', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
  path: this.$route.path, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
  lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/dev/src/js/utils/i18n/index.js
})
js

gittalk的使用，执行yarn add gitalk@1.7.2。需要在github申请clientID，clientSecret，登录github，点击右上角settings->Developer settings->New OAuth App，生成clientID，clientSecret。同时也要新建一个专门放评论的仓库。按照以下配置即可

import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
if (this.$route.path) {
  const gitalk = new Gitalk({
    clientID: '***',
    clientSecret: 'efb69e54926703f6f48',
    repo: 'solo-blog',
    owner: 'Arrod',
    admin: ['Arrd'],
    id: this.$route.path,
    distractionFreeMode: false,
    language: "zh-CN",
  })
  gitalk.render('comments')
}
js

Valine的使用，执行yarn add valine@1.4.14，无后端的评论系统，官网，基于leancloud，先要注册账号。开发版本是免费的博客评论系统。左边菜单设置->应用凭证，可以看到appId,appKey。

import Valine from 'valine';
this.$nextTick(() => {
  new Valine({
    el: "#comments",
    appId: 'i6UzLvqubGzoHsz',
    appKey: 'HsPRcF8sK4lQ9',
    path: this.$route.path,
    requiredFields: ['nick', 'mail'],
    avatar: "monsterid",
    placeholder: "来都来了，看都看了，想说点什么吗 0_o"
  })
})
js

代码规范

常量：使用大写字母和下划线来组合命名，下划线用以分割单词掘金方法：驼峰式命名，统一使用动词或者动词+名词形式组件：命名遵循 PascalCase 约定

src                               源码目录
|-- api                              接口，统一管理
|-- assets                           静态资源，统一管理
|-- components                       公用组件，全局文件
|-- filters                          过滤器，全局工具
|-- icons                            图标，全局资源
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- views                         视图目录
|   |-- staffWorkbench               视图模块名
|   |-- |-- staffWorkbench.vue       模块入口页面
|   |-- |-- indexComponents          模块页面级组件文件夹
|   |-- |-- components               模块通用组件文件夹
bash

css：统一使用"-"连字符；如果 CSS 可以做到，就不要使用 JS；省略值为 0 时的单位

网站缺陷

网站开发完后，再观察期间发现了些问题。点击量统计错误；时区错误导致更新时间显示错误；图片上传名字相同，会进行覆盖；总共有四个分类，页面应该分开点击，而不是一起点击；页面调的接口过多；刷新页面抖动；

本文由木之下发表，最后编辑时间为：2023-11-26 19:50:10
（完）

个人博客的开发流程

前言

开发个人博客

配置数据库链接池

前后端代码托管

部署线上

使用Docker的方式部署

使用Jenkins方式进行部署

安装ssh插件

安装node插件

Maven的配置

JDK的安装

接入云评论

代码规范

网站缺陷

Navicat Premium15下载安装破解

Flutter环境搭建