如何搭建一个博客，并放到服务器上

搭建博客的目的

记录日常遇到的问题等，包含不限于技术和生活技巧。有一个博客，就可以作为载体承载着，如以下：

练习md文件编写
实践记录（例如搭建该博客）
遇到的问题，解决方法记录
技术框架，知识总结
提高描述能力，降低阅读成本

以下为博客的效果，跟着步骤一步一步来便可以做到，那么，说干就干，走起。

效果

http://119.3.41.35/

一. VuePress（非必要）

使用原因

本次搭建的博客选用VuePress，因为其以Markdown为主，注重写作内容，无需分心于其它配置。推荐看看VuePress官方文档¹

下面我们来实操一个DEMO

操作

初始化项目

# 新建目录
mkdir vuepress-blog && cd vuepress-blog

# 初始化
yarn init # npm init

# VuePress 安装为本地依赖  不推荐全局依赖，避免遇到奇奇怪怪的问题，且项目内更好管控
yarn add -D vuepress # npm install -D vuepress

新建文档

# 创建md文档
mkdir docs && echo # Hello VuePress > docs/README.md

启动服务器
sh
```
# 注意，是npx而不是npm
npx vuepress dev docs
```
npm在5.2版本后添加了npx。npx 想要解决的主要问题，就是调用项目内部安装的模块。具体可以看阮一峰老师的文档
此处便是调用了项目内的vuepress启动的服务，至此服务已启动。（cmd偶尔假死，得敲下按键踢一脚才会动，推荐使用cmder，yyds）
往package.json添加以下代码，方面启动，后续只要运行 yarn docs:dev 即可启动服务，打包同理。
json
```
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}
```

二. vuepress-theme-reco

使用原因

VuePress确实可以满足我们需求，但样式上还差了点意思。所以就需要有 vuepress-theme-reco²，一款简洁而优雅的 vuepress 博客 & 文档主题。

操作

上一步vuepress-blog的文件夹可以删了，只是个DEMO（当然也可以选择留着以后玩）

我们先新建项目

# 新建项目，填写基本信息
npx vuepress-theme-reco-cli init vue-blog

安装依赖
sh
```
yarn install
```
启动服务
sh
```
yarn dev
```

至此，博客的框架已经有了，也可以看到博客的样子。

三. 本地使用node启动服务器调用静态文件（非必要）

原因

在上一步已经可以看到页面效果了，但在服务器是使用打包完的代码。纯粹好奇，想在本地跑跑打包完的代码。

操作

执行yarn build进行打包，打包完目录多了个public文件夹

进入该文件夹，并新建个Server.js文件，粘贴以下代码


// require这些东西都是调用node环境中的包，只要有node环境，这些require的模块都是默认被安装进去了，就可以直接这样写
// node支持ES6的写法，下面的就是ES6的写法，不需要额外使用插件来把ES6转ES5，很方便

let http = require('http')
let url = require('url')
let util = require('util')
let fs = require('fs')

// http库是node提供的api，可以直接上node的中文网，直接看到各种api
let server = http.createServer((req, res) => {

  // 通过你在浏览器输入的网站，利用url.parse进行解析成一个对象，再读取其中pathname的属性
// 例如你输入http://localhost:8080/index.html，然后url.parse(req.url).pathname返回的值为 "/index.html"
  var pathname = url.parse(req.url).pathname
  if(pathname==='/'){
    pathname+='index.html'
  }
  pathname = pathname.substring(1)
  console.log('file:' + pathname)
  fs.readFile(pathname, (err, data) => {// fs读取文件
    if (err) {
      res.writeHead(404, { // 错误返回404状态码
        'Content-Type': 'text/html'
      })
    } else {
      const contentTypeConfig = {
        js: 'application/javascript',
        html: 'text/html',
        css: 'text/css',
        webm: 'application/octet-stream',
        jpg: 'image/jpeg'
      }
      const result = pathname.match(/^.*\.(.*?)$/)
      const pref = result? result[1]: '' // 获得文件后缀
      
      const contentType = contentTypeConfig[pref] || 'text/plain'
      res.writeHead(200, { "Content-Type": contentType});
      res.write(data,'binary');
    }
    res.end()
  })
})

server.listen(8080, '127.0.0.1', () => {
  console.log('服务器已经运行，请打开浏览器，输入：http://127.0.0.1:8080/')
})

在该文件目录下开启cmd窗口，执行node Server.js来启动node服务器
emmm...看一眼页面，跟yarn dev启动的一致.好奇心满足了。

四. 博客发布到服务器上

目的

本地的博客，仅仅自己能看到，略微有点孤单，犹如单机版朋友圈，所以要上传到服务器上。刚好薅羊毛薅了个3年的服务器，缘，妙不可言。

操作

打包上传服务器

使用finalShell工具连接服务器
通过finalShell工具，在服务器新建目录/var/www，为什么选择在/var，参考了linux目录说明³:
var 是 variable(变量) 的缩写，这个目录中存放着在不断扩充着的东西，我们习惯将那些经常被修改的目录放在这个目录下。包括各种日志文件。
通过finalShell工具，手动拖动刚刚yarn build打包出来的/public文件夹放到服务器/var/www文件夹中。

配置nginx

可以充当本地的node服务器，访问服务器上的静态网站

在 CentOS 上，使用 yum 命令来安装 nginx
sh
```
yum install nginx -y
```
安装完后启动, 使用nginx命令启动
sh
```
nginx
```
通过服务器ip地址，可以访问到 nginx 的测试页面，如果无法访问，请使用以下命令重启 nginx
sh
```
nginx -s reload 
```
配置静态服务器访问路径，在服务器上找到/etc/nginx/nginx.conf文件，将其打开并修改配置root /usr/share/nginx/html;（42行附近）为以下代码
sh
```
root /var/www;
```
使用以下命令刷新配置，重启 nginx，
sh
```
nginx -s reload 
```
至此，访问服务器ip，你的博客已经能看到了。

此处参考了linux系统搭建静态网页⁴

五. 优化发布过程

原因

虽然已经可以看到博客了，但有以下几个缺点。

代码在本地，不好异地开发。
写完代码得打包，打包完的代码还得通过finalShell工具提交到服务器上，操作有点冗余，想要打包并自动上传到服务器。

目的

博客代码上传github，方便后续维护
每次写完文章就打包代码，并将打包后的代码上传服务器（写在package.json，避免每次都得手动去finalShell上传）。

操作

上传github仓库

登录gitHub，并新建repository
新建时不要README .gitignore license 这些文件，项目里有。

在项目中执行命令行，创建一个 Git 仓库

# 初始化 Git 仓库
git init

# 所有文件添加到暂存区
git add .

# 提交暂存区的文件到仓库区
git commit -m "init"

# 添加 Git 远程仓库，将xxx换成自己的gitHub仓库地址
git remote add origin https://github.com/xxxxx/xxxx.git

# 提交到远程仓库
git push -u origin master

打包自动发布

为了便于后续多个项目挂在到服务器，/var/www不止放博客一个项目，所以在其内部新建子目录/var/www/blog，并将原本博客的代码迁移到此。
由于上一步，服务器上博客的静态目录已经更改，所以nginx的静态服务器访问路径配置也需要更改，在服务器上找到/etc/nginx/nginx.conf文件，将其打开并修改配置root /usr/share/nginx/html;（42行附近）为以下代码
sh
```
root /var/www/blog;
```
项目输出打包文件夹也嵌套多一层，方便上传。在项目里找到docs\.vuepress\config.js文件，将其中的输出打包目录配置dest: 'public'改为dest: 'public/blog'。后续只要执行yarn build，就会在public/blog目录下打包出文件。
上传本地目录到服务器命令使用Github Action，在提交到github时执行指定脚本，且将服务器ip等隐私信息存储为隐私变量。这方面后续再出文章记录。

体会

现在新建一个博客，对现在的开发者来说门槛很低。有各式各样的开源框架可以使用，写完打包提交服务器，一套下来挺舒服的。后续多学学，还可以继续扩展，更加“懒”。

也感受到了自己语言组织能力的不足，描述不清晰，自己读了一遍总觉得卡壳，后续需要加强锻炼。

第五步修改nginx的静态文件配置，有意识到这个修改是个坑，应该没法同时兼容多个项目，到时候需要修改，属于脱一半裤子放屁的操作，看似解决了实际没解决。不过~目前只有一个项目也不是不能先用着。

遗留

nginx配置，同时多个项目挂载怎么配静态
如何加强编写能力

参考资料

[1] VuePress官方文档:：https://vuepress.vuejs.org/zh/

[2] vuepress-theme-reco官方文档:：https://vuepress-theme-reco.recoluan.com/

[3] Linux 系统目录结构：https://www.runoob.com/linux/linux-system-contents.html

[4] linux系统搭建静态网页：https://blog.csdn.net/weixin_43488742/article/details/97135343

以上是一个博客的搭建全过程，谢谢阅读，希望对你有所帮助

搭建博客的目的 ​

效果 ​

一. VuePress（非必要） ​

使用原因 ​

操作 ​

二. vuepress-theme-reco ​

使用原因 ​

操作 ​

三. 本地使用node启动服务器调用静态文件（非必要） ​

原因 ​

操作 ​

四. 博客发布到服务器上 ​

目的 ​

操作 ​

打包上传服务器 ​

配置nginx ​

五. 优化发布过程 ​

原因 ​

目的 ​

操作 ​

上传github仓库 ​

打包自动发布 ​

体会 ​

遗留 ​

参考资料 ​

搭建博客的目的

效果

一. VuePress（非必要）

使用原因

操作

二. vuepress-theme-reco

使用原因

操作

三. 本地使用node启动服务器调用静态文件（非必要）

原因

操作

四. 博客发布到服务器上

目的

操作

打包上传服务器

配置nginx

五. 优化发布过程

原因

目的

操作

上传github仓库

打包自动发布

体会

遗留

参考资料