基于vuepress2搭建个人blog
基于vuepress2搭建个人blog
准备
清单
- 服务器
- 域名
服务器
需要一台拥有稳定公网IP的服务器，各大运营商均可购买，最低配置即可。
价格一般300元/年左右。
建议选择海外服务器，国内服务器需要备案，操作比较复杂
域名
各大运营商均可以购买域名，此处不做展开。
获得域名后，将自己的域名指向购买的服务器的公网IP地址。
步骤
创建代码仓库
1、使用git或者其他代码版本管理工具均可，按照个人喜好
2、如使用git，使用github/gitee均可，创建好代码仓库后，同步仓库到本地
本地搭建vuepress2环境
1、参考vuepress2官方教程搭建本地环境
2、建议使用npm初始化仓库
3、建议选择yarn作为后续的包管理工具
本地调试
1、调试成功后，本地可以正常展示博客demo页面
2、如果调试过程中出现问题，可参考官方场景问题排查，亦可在本文下留言，24小时内回复
3、根据个人喜好调整博客配置与插件，详情参考官方指南。
编译
1、本地调试成功后，尝试在本地编译代码
yarn docs:build
编译成功后，即可尝试部署代码到服务器上
上线
登录到自己的服务器后，可以选择多种方式部署自己的代码，前提要将代码拉取到服务器上
使用自己之前选择的代码管理工具拉取代码到指定目录（个人喜好即可，建议是在用户目录下）
使用http-server启动服务
1、安装依赖
在服务器上运行yarn/npm同样需要提前安装，注意检查其版本是否符合官方要求
2、安装http-server
yarn -g http-server
3、启动服务
在博客代码所在的目录下，启动服务
http-server
没有问题的话，此时可以在浏览器通过自己的域名访问到博客网站
使用nginx启动服务
1、安装nginx
2、编辑nginx配置文件
将root指向博客代码中的dist模块
server {
listen 8080; # 指定端口 注意云服务器的防火墙是否开放对应端口
server_name your_domain_name.com; # 不一定是.com后缀，以申请的域名为准
location / {
root /your_blog_code_path/src/.vuepress/dist;
index index.html index.htm index.md;
}
}
3、启动nginx服务
sudo /your_nginx_path/sbin/nginx -t # 检查nginx配置是否正确
sudo /your_nginx_path/sbin/nginx # 启动nginx服务
一切顺利的话，此时可以在浏览器通过自己的域名访问到博客网站
Q&A
1、关于端口号 对访问域名的影响
不论是使用http-server还是nginx，注意启动的端口号。选择非80端口，在浏览器访问时，需要加端口号才能访问成功
- 是80端口 yourdomainname.com
- 非80端口，如8081 yourdomainname.com:8081
2、使用80端口启动服务失败
1024以下端口，需要sudo才能启动成功
3、关于gitignore
按照vuepress官方教程搭建时，默认在gitignore文件中包括dist。
这意味着本地提交的代码中，不包含本地编译的代码，此时有两种方式解决
- 在.gitignore文件中，删除dist一行，重新编译 & 提交代码到远程
- 在服务器上自行编译代码