likes
comments
collection
share

手把手带你打造绝美个人博客网站🔥【含部署教程+免费SSL证书配置】！

作者站长头像
站长
· 阅读数 54

前言

大家好，我是HoMeTown。

手把手带你打造绝美个人博客网站🔥【含部署教程+免费SSL证书配置】！

Vuepress

Vuepress是一个Vue 驱动的静态网站生成器，主要是用来生成一些文档，但是它还提供了一些主题，我们可以利用这些主题自己去定制开发个人的BLOG。

手把手带你打造绝美个人博客网站🔥【含部署教程+免费SSL证书配置】！

vuepress-theme-reco

这是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能，主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用，这个主题的UI我觉得是真的香，你几乎不用做任何改动就可以得到一个绝美UI的Blog website，如果你有自己更好的想法，当然也可以通过styles去自己写css（像我一样） 官方链接 手把手带你打造绝美个人博客网站🔥【含部署教程+免费SSL证书配置】！

安装

首先我们需要先安装Vuepress

mkdir blog && cd blog // 创建目录
npm init // 初始化包管理器
npm install -D vuepress // 安装vuepress

修改package.json，添加script脚本

{
  "scripts": {
    "dev": "vuepress dev . --open --host \"localhost\"",
    "build": "vuepress build ."
  }
}

紧接着安装 vuepress-theme-reco

npm install vuepress-theme-reco@1.5.7 --save-dev

基础依赖安装完毕

目录结构

  • .vuepress 用于存放全局的配置、组件、静态资源等
    • plublic 静态资源，多用于存放IMAGE
    • styles 全局样式，可用于自定义样式
    • config.js BLOG 配置
  • blogs 用于存放blog md文件
  • .cz-config.js 这个是提交的commit message格式化（非必要）
  • .deploy.sh 部署脚本
  • README.md 首页样式

.vuepress/config.js

这个是整个BLOG的一个配置文件，设置主题也在这个文件里，下面简单介绍一下这个文件里的配置项：

大致就是这些，具体的可以上Vuepress & vuepress-theme-reco 看看他们的文档，他们的文档相对来说还是比较全的。

plugins

还是在刚刚那个文件里，与 themeconfig同级新增plugins：

返回顶部

手把手带你打造绝美个人博客网站🔥【含部署教程+免费SSL证书配置】！

plugins: [
    ...
    ["@vuepress-reco/back-to-top"] // reco 内置
    ...
]

网易云音乐

手把手带你打造绝美个人博客网站🔥【含部署教程+免费SSL证书配置】！

安装依赖

npm install vuepress-plugin-meting --save

plugins: [
    ...
    [
        "meting",
        {
            meting: {
                 // 网易
                 server: "netease",
                 // 读取歌单
                 type: "playlist",
                 mid: "2859214503",
            },
            // 不配置该项的话不会出现全局播放器
            aplayer: {
              // 吸底模式
              fixed: true,
              mini: true,
              // 自动播放
              autoplay: false,
              // 歌曲栏折叠
              listFolded: true,
              // 颜色
              theme: "#ccc",
              // 播放顺序为随机
              order: "random",
              // 初始音量
              volume: 0.1,
              // 关闭歌词显示
              lrcType: 0,
            },
            mobile: {
              // 手机端去掉cover图
              cover: false,
            },
        },
         
    ]
    ...
]

图片放大插件

这个插件可以将你Blog里的文章的图片进行放大，还是挺友好的

安装依赖

npm install @vuepress\plugin-medium-zoom --save

plugins: [
    ...
    [
      "@vuepressplugin-medium-zoom",
      {
        selector: ".page img",
        delay: 1000,
        options: {
          margin: 24,
          background: "rgba(25,18,25,0.9)",
          scrollOffset: 40,
        },
      },
    ],
    ...
]

看板娘

这个是我最喜欢的Plugins之一，很卡哇伊

手把手带你打造绝美个人博客网站🔥【含部署教程+免费SSL证书配置】！

安装依赖

npm install @vuepress-reco/vuepress-plugin-kan-ban-niang --save

plugins: [
    ...
    [
      //先安装在配置， 
      "@vuepress-reco/vuepress-plugin-kan-ban-niang",
      {
        theme: [
          "blackCat",
          "whiteCat",
          "haru1",
          "haru2",
          "haruto",
          "koharu",
          "izumi",
          "shizuku",
          "wanko",
          "miku",
          "z16",
        ],
        clean: false,
        messages: {
          welcome: "我是HoMeTown欢迎你的关注 ",
          home: "去首页看看吧~",
          theme: "好吧，希望你能喜欢我的其他小伙伴。",
          close: "再见哦",
        },
        width: 240,
        height: 352,
      },
    ],
    ...
]

部署

部署还是采用了点对点的ssh部署，首先在自己本地建一个.deploy.sh脚本，然后执行两个命令

  1. 打包 npm run build
  2. 部署 sudo scp -i ~/.ssh/id_rsa -r 打包后静态资源的绝对路径 服务器用户@ip地址:需要部署到的位置

web服务器

很简单，因为它打包出来都是html文件，所以直接用nginx设置location就好了，也不用try_file，在自己的云平台设置一下域名解析，就可以访问了，如果想要设置 https，参考我的这篇文章即可【Linux server】acme.sh申请免费SSL证书__Lets encrypt

完结~

往期回顾

转载自:https://juejin.cn/post/7103780261628018702
评论
请登录