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官网 上说明了新版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:dev
和 yarn 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以及菜单导航「即各模块文章目录路径」,lastUpdated
和 contributors
为 git提交记录内的更新时间和提交者,因为自己网站仅个人维护,且基于私有仓库,因此我去除了这两项,也可以根据官网相关配置参考。完成上述配置,就可以动手开始写内容了。
初始化页面
首页
先配置好网站首页,例如:
---
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.html
完成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来进行克隆,这样可以在服务器上进行打包替换,只需要集中写自己的博客内容即可,无需再进行打包,