新时代农民工的日常
在线格式化 (opens new window)
base64编解码 (opens new window)

# 使用Vuepress和Nginx搭建个人博客

# Vuepress

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

说白了，VuePress就是基于Vue，用了SSR渲染成本地静态页面，解决PWA在SEO方面的弱势。 而VuePress除了使用Vue外，还继承了Vue各项能力，比如使用stylus写css，也能通过enhanceApp来增强应用，比如在Vuepress中使用Vuex等等。 后续将介绍如果安装Vuepress，如果使用enhanceApp，如果使用stylus，如何在Vuepress中自定义主题，并且最终将vuepress内容发布到Nginx供internet访问。

# Vuepress安装和Nginx配置

# node和npm安装

sudo apt-get install nodejs
node --version
sudo apt-get install npm
npm --version

如果安装成功，node 和 npm都会有相应的版本号打印出来

# vuepress安装

// 初始化输入各种信息
npm init
// ... 各种初始化
npm install vuepress
// 当前目录下执行
sudo npm run docs:dev

然后在本地浏览器访问localhost:8080可以看到调试页面 sudo npm run docs:build 命令可以编译生成所有的静态html文件，这些静态文件可以配置在nginx服务器直接访问

# vuepress目录结构

├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

更多详细内容可以访问https://vuepress.vuejs.org/zh/guide/directory-structure.html (opens new window) 安装完vueress后，可以看到vuepress的目录结构如上:

  • .vuepress 博客主题(包括样式，资源文件，组件，应用增强等).
    • components 全局组件，vuepress编译时，可以作为全局组件使用
    • theme 博客布局，可以通过继承或者重写的方式更改vuepress的布局以及渲染内容，theme/layouts/Layout.vue是每个vuepress页面都会加载的一个布局组件，其中<Content/>组件会渲染完成的Markdown内容。
    • public 资源文件，如favi.icon, markdown中使用的资源文件等
    • styles 博客的css样式，可以支持stylus等
    • templates 模版，资深vuepress使用
    • config.js 博客的总体配置
    • enhanceApp.js Vue全局钩子，可以作为增强App，如使用Vuex等
  • README.md 或者(index.md) 编译后会作为博客首页即 index.html
  • guide 博客包含的所有内容，博客内容全部用md编写，vuepress会把它编译为html静态文件
  • config.md 与guide一样都会被编译为html静态文件

# vuepress中使用vuex

刚开始安装vuepress时，.vuepress目录下面是没有enhanceApp.js的，所以如果没有那么新建一个：

import Vuex from 'vuex'
import articles from './store/articles'

export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  Vue.use(Vuex)
  let store = new Vuex.Store({})
  // 注册tags store
  store.registerModule('articles',articles)
  Vue.mixin({store: store})
}

enhanceApp是Vuepress暴露出来的一个Vue全局钩子，在这里可以注册Vuex，可以做路由增强。

# Nginx配置

其实就是把生成的文件拷贝到nginx的发布目录 /disk/pinkcle/website_root

sudo apt-get install nginx

安装完后，修改nginx配置文件/etc/nginx/sites-enabled/default

server {
        listen 80;
        server_name pinkcle.com www.pinkcle.com
        root /disk/pinkcle/website_root;
        # 重定向到https
        rewrite ^(.*)$ https://$host$1 permanent; 
        location / {
                sendfile on;
                try_files $uri $uri/ =404;
        }
}
server {
        listen 443 ssl;
        root /disk/pinkcle/website_root;
        index index.html index.htm index.nginx-debian.html;
        server_name pinkcle.com www.pinkcle.com;
        # ssl 证书
        ssl_certificate pinkcle.com/1_pinkcle.com_bundle.crt;
        ssl_certificate_key pinkcle.com/2_pinkcle.com.key;
        ssl_session_timeout 5m;
        location / {
                try_files $uri $uri/ =404;
        }
}

# 自定义主题

建议参阅Vuepress官网https://vuepress.vuejs.org/zh/theme/writing-a-theme.html (opens new window)

本站是利用了Vuepress继承的特点，重写了默认主题的样式https://vuepress.vuejs.org/zh/theme/inheritance.html (opens new window) 继承跟编程语言里面的继承概念类似，如果有当前重写了默认样式，则会加载override的样式，否则会加载base样式 在.vuepress/theme 目录下新建index.js文件，然后在文件下增加如下内容，就表达了主题的继承

// 继承Vuepress默认布局
module.exports = {
  extend: '@vuepress/theme-default'
}

然后在./vuepress/theme/layouts/目录下添加Layout.vue 则编译后布局就变为了自定义的Layout.vue布局

Layout.vue 是vuepress的布局入口，一定需要。

// 重写Vuepress布局
<template>
  <div>
    <Navbar v-if="mainPage"/>
    <div v-if="mainPage" class="blog-layout">
      <Body class="blog-content" />
      <SideBar class="blog-sidebar" />
    </div>
    <div v-else class="blog-layout theme-container">
      <Navbar />
      <div class="blog-content">
        <Content class="theme-default-content" />
        <Comment class="theme-custom-content" />
        <div class="theme-custom-content">
          <RoutePage :type="'prev'"/>
          <RoutePage :type="'next'"/>
        </div>
      </div>
      <ArticleOutline class="outline-sidebar" v-if="$page.headers && $page.headers.length"/>
    </div>
  </div>
</template>

样式什么的暂时不写了，如果有需要留言，我再加上哈。

# 总结

只是简单的写了下vuepress的应用，本博客基于上述思路进行Layout以及样式，如果有想要样式及排版的，可以留言留下联系方式，发送到个人邮箱 目前样式还没整理好，待整理好后会发布github和npm。

*本博客基于以上内容搭建，如需主题，请留言联系方式，后续也会上传GitHub，以及发布npm。

* 转载请注明出处

目录