个人博客的开发流程
  一些代码   0 评论   85 浏览量

个人博客的开发流程

  一些代码   0 评论   85 浏览量

前言

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

开发个人博客

开发前提: 系统需要安装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

配置完成之后,可以写一个配置类,可以在网页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
(完)