Vuepress+Nginx+阿里云搭建个人网站实录

环境

设备:Mac OS
框架:Vuepress ^2.0.0-beta.26
服务:Nginx + 阿里云

Why Vuepress 2.x Not Vuepress 1.x

于2021年4月份,来到目前所在的新公司,历时半年有余,使用Vue3.x对于企业后台进行重构,而 Vuepress2.x官网open in new window 上说明了新版Vuepress是基于Vue3.x,并且使用Vite进行打包,在体会过Vite的优势之后便选择了Vuepress2.x来开发我的个人博客站,以下即是自己的摸索与搭建实录,文笔有限,但愿帮得到你~

初始化项目

在本地的文件夹内创建一个 submara.com 的文件夹,以此打开 Shell

此处并未根据官网的方式通过命令行创建文件夹,原因在于之前在 1.x 踩过坑,会导致 README.md 内容中文字符乱码,对于 2.x 是否还有这个坑,没再去验证

yarn init
yarn add -D vuepress@next

下面,按照官网的步骤,在 package.json 里面添加一下脚本命令

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

在完成上述步骤后,项目已经可以跑 yarn run docs:devyarn run docs:build 两个命令了,已经具备了本地开发和部署打包的基本条件。首先,完成一些初始化配置,在/docs/.vuepress 文件夹内新建一个 config.js 的总配置文件,初始化配置一些内容即可,例如:

module.exports = {
  lang: 'en-US',
  title: 'Geek Improve',
  description: 'JasonSubmara Blog for Record GeekImprove',
  head: [
    ['link',
      {rel: 'icon', href: '/images/logo.png'}
    ]
  ],
  themeConfig: {
    logo: '/images/logo.png',
    logoDark: '/images/logo-white.png',
    navbar: [
      {text: "Home", link: "/"},
      {text: "Web", link: "/Geek"},
      {text: "Design", link: "/design"},
      {text: "Problem", link: "/problem"},
      {text: "Service", link: "/service"},
      {text: "About", link: "/about"}
    ],
    lastUpdated: false,
    contributors: false
  }
}

以上配置内,声明了网站名称、网站Logo以及菜单导航「即各模块文章目录路径」,lastUpdatedcontributors 为 git提交记录内的更新时间和提交者,因为自己网站仅个人维护,且基于私有仓库,因此我去除了这两项,也可以根据官网相关配置open in new window参考。完成上述配置,就可以动手开始写内容了。

初始化页面

首页

先配置好网站首页,例如:

---
home: true
heroImage: /images/logo-white.png
heroText: null
tagline: null
actions:
- text: Front-End Develop
  link: /Geek
  type: primary
- text: Contact Me
  link: /about
  type: secondary
features:
- title: Web
  details: Front-End Developer Study & Learning Record
- title: Problems
  details: Solutions for Problems
- title: Services
  details: Essential Server-side Skills
footer: <a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2021034221号</a>
footerHtml: true
---

完成以上配置,便得到如下图所示的网站首页

首页

之后便可以开始博客的主体内容啦

打包部署至线上

【第一步】注册域名 & 服务器购买

在阿里云上完成域名注册和服务器购买,部署至服务器的前提条件基本准备就绪,在服务器上安装nginx,服务器环境 CentOS 8,参考教程:

https://nginx.org/en/linux_packages.htmlopen in new window

完成nginx安装之后,可以配置submara.conf,参考如下:

配置文件说明

443 ssl 和 ***.pem / ***.key 均需要通过阿里云的控制台-证书来获得,以支持 https

server {
       listen   443 ssl;
       server_name  submara.com;
       access_log  /var/log/nginx/access-www.log main;


        ssl_certificate /etc/nginx/conf.d/cert/********.pem;  #需要将cert-file-name.pem替换成已上传的证书文件的名称。
        ssl_certificate_key /etc/nginx/conf.d/cert/********.key; #需要将cert-file-name.key替换成已上传的证书私钥文件的名称。
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        #表示使用的加密套件的类型。
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
        ssl_prefer_server_ciphers on;

       location / {
               root  /home/mara/blog/dist/;
               index index.html;
       }
}


server {
    listen 80;
    server_name  www.submara.com submara.com; #需要将yourdomain.com替换成证书绑定的域名。
    rewrite ^(.*)$ https://submara.com; #将所有HTTP请求通过rewrite指令重定向到HTTPS。
    location / {
        index index.html index.htm;
    }
}
~    

【第二步】yarn docs:build

将打包好的静态资源文件放置到服务器上, 可以借助 xftp 工具上传也可以通过 git 克隆, 选择适合自己的方式就可以,目前我使用的是通过git来进行克隆,这样可以在服务器上进行打包替换,只需要集中写自己的博客内容即可,无需再进行打包,

以上~
最近更新时间: