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

简介: 前言大家好,我是HoMeTown。最近一直在更与EPR相关的文章,做一些记录

前言

大家好,我是HoMeTown

最近一直在更与EPR相关的文章,做一些记录,然后有几个掘金的朋友在我的主页上发现了我的BLOG,表示比较感兴趣吗,今天抽出来一篇聊一下这个站的搭建。

网络异常,图片无法展示
|

Vuepress

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

网络异常,图片无法展示
|

vuepress-theme-reco

这是一个vuepress主题,旨在添加博客所需的分类、TAB墙、分页、评论等能,主题追求极简,根据 vuepress 的默认主题修改而成,官方的主题配置仍然适用,这个主题的UI我觉得是真的香,你几乎不用做任何改动就可以得到一个绝美UI的Blog website,如果你有自己更好的想法,当然也可以通过styles去自己写css(像我一样) 官方链接

网络异常,图片无法展示
|

安装

首先我们需要先安装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的一个配置文件,设置主题也在这个文件里,下面简单介绍一下这个文件里的配置项:

module.exports = {
    title: 'Blog Title', // Blog的标题,会显示在页面左上角的位置
    description: '描述',
    dest: 'public', // 打包输出产物
    thteme: 'reco', // 选用主题
    head: [], // 头元素
    themeConfig: { // 主题配置
        record: '备案信息',
        recordLink: '备案跳转链接',
        startYear: '2017', // 项目开始时间,只用写年份
        nav: [ // 导航栏
         {
             text: "Home", // item text
             link: "/", // item path
             icon: "reco-home" // item icon
         },
         ...
        ],
        friendLink: [ // 友链
            { title: 'juejin', desc: '稀土掘金', logo: '..', link: 'xxx'}
        ],
        search: true, // 是否开启搜索
        authorAvatar: '...jpg', // 作者头像
        mode: 'auto', // 默认 auto,auto 跟随系统,dark 暗色模式,light 亮色模式
        modePicker: false,  // 默认 true,false 不显示模式调节按钮,true 则显示
    },
    locales: { ... }, // 多语言
}
复制代码

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

plugins

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

返回顶部

网络异常,图片无法展示
|

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

网易云音乐

网络异常,图片无法展示
|


安装依赖

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之一,很卡哇伊

网络异常,图片无法展示
|

安装依赖

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

完结~


目录
相关文章
|
9天前
|
安全 搜索推荐 数据建模
解决网站“不安全”、“不受信”、“排名下降”,你需要——「SSL证书」
SSL证书是网络安全的关键,用于加密和验证网站身份,保护用户数据安全,防止信息被窃取。它分为DV、OV、EV和IV四种类型,每种验证网站身份的程度不同。DV证书快速签发,OV和EV证书提供更高级别的身份验证,EV证书曾在浏览器地址栏显示绿色。目前,DV证书占据市场大部分份额。SSL证书还有单域、通配符和多域之分,有效期曾从多年逐渐缩短至90天,以增强安全性。部署SSL证书能提升用户信任,优化SEO排名,并符合网络安全法规要求。
解决网站“不安全”、“不受信”、“排名下降”,你需要——「SSL证书」
|
5天前
|
负载均衡 安全 应用服务中间件
nginx配置ssl和反向代理的配置代码
【5月更文挑战第2天】nginx配置ssl和反向代理的配置代码
24 3
|
9天前
|
XML 网络安全 开发工具
如何下载并安装 SAP ABAPGit,并完成 ABAP 服务器上 SSL 证书的配置试读版
如何下载并安装 SAP ABAPGit,并完成 ABAP 服务器上 SSL 证书的配置试读版
13 0
|
9天前
|
安全 应用服务中间件 网络安全
linux_nginx中添加ssl配置(open ssl)
linux_nginx中添加ssl配置(open ssl)
27 1
|
9天前
|
弹性计算 安全 Java
阿里云服务器配置、(xshell)远程连接、搭建环境、设置安全组、域名备案、申请ssl证书
以下是内容的摘要: 在阿里云购买服务器并进行基本配置的步骤如下: 1. **准备工作**: - 注册阿里云账号:访问阿里云官网并注册新账号,输入用户名、手机号和验证码。 - 实名认证:在个人中心进行实名认证,建议选择企业实名,因为个人实名可能无法索取企业发票。
|
9天前
|
安全 应用服务中间件 网络安全
SSL原理、生成SSL密钥对、Nginx配置SSL
现在,你的Nginx虚拟主机应该已经配置了SSL,可以通过HTTPS安全访问。确保在生产环境中使用有效的SSL证书来保护通信的安全性。
38 0
|
9天前
|
前端开发 应用服务中间件 网络安全
nginx配置SSL证书配置https访问网站 超详细(附加配置源码+图文配置教程)
nginx配置SSL证书配置https访问网站 超详细(附加配置源码+图文配置教程)
120 0
|
9天前
|
域名解析 网络协议 应用服务中间件
阿里云SSL证书配置(HTTPS证书配置)
该内容是一个关于如何在阿里云上准备和购买SSL证书,以及如何为网站启用HTTPS的步骤指南。首先,需要注册并实名认证阿里云账号,然后在SSL证书控制台选择证书类型、品牌和时长进行购买。申请证书时填写域名信息,并进行DNS验证,这包括在阿里云域名管理板块添加解析记录。完成验证后提交审核,等待证书审核通过并下载Nginx格式的证书文件。最后,将证书配置到网站服务器以启用HTTPS。整个过程涉及账户注册、实名认证、证书购买、DNS设置和证书下载及安装。
191 0
|
9天前
|
网络协议 Serverless 网络安全
阿里云函数计算自定义域名的SSL证书免费全自动申请及部署
阿里云函数计算简化了开发部署,让用户专注业务逻辑,降低了运维复杂性。然而,SSL证书支持需额外付费:免费证书有效期缩短至3个月,1年证书及自动化部署均收费。为节省成本,小微企业和个人开发者可以采用一套全自动、全免费的SSL证书申请、续签和部署方案。该方案包括自动向Let's Encrypt申请证书、使用阿里云OpenAPI更新证书以及在证书到期前提前申请。通过Win-Acme(Windows)实现,详细步骤包括设置win-acme、自动DNS验证和更新函数计算证书。
146 5
|
4天前
|
安全 小程序 网络安全
阿里云腾讯云免费SSL证书托管系统的开发初衷
由于Google等公司推动,互联网安全趋势将SSL证书期限统一缩短至3个月,阿里云和腾讯云相继跟进。对于管理多个站点的小公司而言,手动维护变得繁琐。为自动化此过程,作者探索使用API解决方案。通过研究腾讯云API,成功实现证书的自动创建、审核和下载。为应对无免费到期提醒服务,作者创建计划任务,在证书到期前7天发送提醒,初期采用短信提醒,并增设公众号模板消息作为备选方案,完成到期提醒系统的构建。接下来的文章将讨论SSL证书的申请和下载流程。
27 2