如何下载博客模板部署在自己的服务器上

傍晚的时候，把自己的服务器跑通了之后，添加了一个静态的网页，离自己的目标又近了一点，想自己搭建一个独立博客，在上面写一些东西，需要前端展示界面和后台管理界面，为了省时间把这个从零到有的过程建立一遍，我就开始去网站上找模板来测试了。

​

1：找到一个博客模板

基于vue+element-ui简洁的博客模板 ，下载链接：https://gitee.com/fengziy/Fblog

下载完成之后，放在d盘备用

5640239-4b98ac5dd585a35b.png

2：cmd右键管理员身份运行

先进入d盘，再d Fblog进入项目目录

5640239-229843ad89c2ffc9.png

3：安装

npm install

5640239-cf636a7c12f58260.png

这里提示

run npm audit fix to fix them, or npm audit for details

意思：扫描项目漏洞把不安全的依赖项自动更新到兼容性版本

那就按照提示，输入以下提示的命令运行一下

npm audit fix

5640239-ed26fce514e57a93.png

4：运行博客模板

npm run serve

5640239-38c3e32e77aedd4f.png

打开浏览器，输入http://localhost:4567/，可以看见大致的页面内容了。

5640239-d6b9b3bdea037919.png

5：下面重点来了，之前几篇里面配置好了购买的服务器，终于可以派上用场了，博客模板代码准备完成之后。

开始打包

npm run build

5640239-0d913699cbb39ca5.png

打包完成之后，项目文件夹里面出现了一个dist

5640239-9cd64400e6c9f9fa.png

通过dist里面的index.html可以在编辑器里面直接访问

5640239-818884c1d995d21b.png

 图片.png    

6：把dist文件拷贝出来 ，放在桌面,重新命名为fBlog

5640239-b656854b959983e2.png

7：按照上一篇文章里面简单粗暴的方法

服务器上上传一个静态页面，并通过IP地址访问

https://cloud.tencent.com/developer/article/1464487

把桌面文件拖到我的服务器里面

5640239-cf476cfa12c4a16b.png

8：这个时候，打开我的ip，加上文件名称，可以在我自己的服务器上访问模板了，如果对vue很熟悉，那么就把模板改成自己想要的吧，等域名备案下来之后，直接替换成自己的域名啦。

5640239-e3408f2f91d69435.png

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚