手把手教你使用 VuePress 搭建我的博客

时间  2019-11-07 标签 手把手 教 使用 vuepress 搭建 我的 博客

手把手教你使用 VuePress 搭建我的博客

有阅读障碍的同窗，能够跳过第一至四节，下载我写好的 工具包:
git clone https://github.com/zhangyunchencc/vuepress-devkit.git 而后从第五节开始看。

1、为何你须要一个博客？

优秀的程序员都在写博客，写博客有不少好处：html

  • 帮助本身梳理、总结、理解知识点（我的提高）
  • 帮助别人理解知识点（好人一辈子平安）
  • 简历更好看，更多面试机会（升职加薪）

2、什么是 VuePress，为何要使用 VuePress ？

VuePress 是尤雨溪（vue.js 框架做者）4月12日发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，能够用来写文档。详见 VuePress中文网前端

其实相似的建站工具备不少，好比 WordPress、Jekyll、Hexo 等，其中 WordPress 须要本身购买虚拟主机，不考虑；Jekyll 是 Github-Page 默认支持的，据说操做比较复杂，没有用过不作过多评价了；Hexo 以前一直在用，但一直以为主题很差看，风格不够简洁优雅。自从碰见 VuePress，嗯，就是它了~ vue

VuePress 有不少优势：webpack

  • 界面简洁优雅（我的感受比 HEXO 好看）
  • 容易上手（半小时能搭好整个项目）
  • 更好的兼容、扩展 Markdown 语法
  • 响应式布局，PC端、手机端
  • Google Analytics 集成
  • 支持 PWA

3、开始搭建

建立项目文件夹

能够右键手动新建，也可使用 mkdir 命令新建：git

mkdir vuepressBlogDemo

全局安装 VuePress

npm install -g vuepress

进入 vuepressBlogDemo 文件夹，初始化项目

使用 npm init 或 npm init -y（默认yes）程序员

npm init -y

建立文件夹和文件

在 vuepressBlogDemo 文件夹中建立 docs 文件夹，在 docs 中建立 .vuepress 文件夹，在.vuepress中建立 public 文件夹和 config.js 文件，最终项目结构以下所示：github

vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

在 config.js 文件中配置网站标题、描述、主题等信息

module.exports = {
  title: 'Chen\'s blog',
  description: '个人我的网站',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增长一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    nav:[ // 导航栏配置
      {text: '前端基础', link: '/accumulate/' },
      {text: '算法题库', link: '/algorithm/'},
      {text: '微博', link: 'https://baidu.com'}      
    ],
    sidebar: 'auto', // 侧边栏配置
    sidebarDepth: 2, // 侧边栏显示2级
  }
};

在 package.json 文件里添加两个启动命令

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}

一切就绪 跑起来看看吧

npm run dev

4、一些小亮点

完成了基础搭建后，就能够在docs目录下新建 .md 文件写文章了（.md 是 Markdown 语法文件，你须要知道 Markdown 的一些基本写法，很简单，这里给你们一份 Markdown 语法整理大集合）web

下面给你们安利一些实用的方法。面试

代码块高亮

在 .md 文件中书写代码时，可在 ``` 后增长 js、html、json等格式类型，代码块便可按照指定类型高亮算法

clipboard.png

自定义容器

代码：

::: tip 提示
this is a tip
:::

::: warning 注意
this is a tip
:::

::: danger 警告
this is a tip
:::

效果：

clipboard.png

支持Emoji

代码：

:tada: :100: :bamboo: :gift_heart: :fire:

效果：

这里有一份 Emoji 大全

支持 PWA

VuePress 默认支持 PWA，配置方法以下：

config.js 文件中增长

head: [ // 注入到当前页面的 HTML <head> 中的标签
  ['link', { rel: 'manifest', href: '/photo.jpg' }],
  ['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }],
],
serviceWorker: true // 是否开启 PWA

public 文件夹下新建 manifest.json 文件，添加

{
  "name": "张三",
  "short_name": "张三",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "description": "张三的我的主页",
  "theme_color": "blue",
  "icons": [
    {
      "src": "./photo.jpg",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

最后在 iPhone 的 safrai 浏览器中打开本网站，点击 +添加到主屏幕 就能在桌面看到一个像原生 App 同样的图标（感受本身写了一个 App 有木有 ）

5、部署上线

说了这么多都是在本地进行的，如今咱们要把本地的内容推送到某个服务器上，这样只要有网络，就能够随时随地看本身的网站了。

通常来讲，有两种方案可供选择：

  1. 本身买一个服务器，阿里云、腾讯云等，这种方式的好处是速度有保证、能够被搜索引擎收录，坏处是要花钱啊 土豪同窗能够考虑。
  2. 使用 Github Pages 。什么是 Github Pages 呢？简单说就是 Github 提供的、用于搭建我的网站的静态站点托管服务。不少人用它搭建我的博客。这种方式的好处是免费、方便，坏处是速度可能会有些慢、不能被国内的搜索引擎收录。

最终我选择了方案2，下面将给你们讲解如何使用 Github Pages 服务。

登录 Github

打开 github 网站，登录本身的 github 帐号（没有帐号的快去注册并面壁思过做为一个优秀的程序员为啥连一个github帐号都没有）

接着咱们新建两个仓库，

新建仓库一： USERNAME.github.io （不用克隆到本地）

注意！
USERNAME 必须是你 Github 的帐号名称，不是你的名字拼音，也不是你的非主流网名，不要瞎起，要保证和Github帐号名如出一辙！

例如个人 Github 帐号名称是 zhangyunchencc

clipboard.png

那么新建仓库，Repository name 就填写为：zhangyunchencc.github.io

clipboard.png

这个仓库建好后，不用克隆到本地，内容更新修改都在下面的仓库中进行。

新建仓库二：随便起一个名字，好比：vuepressBlog （克隆到本地）

这个项目是用来开发博客的，之后只须要改这个项目就够了。

  • 使用工具包的，将 vuepress-devkit 中的内容拷贝到 vuepressBlog 文件夹中
  • 本身从头搭建的，将 vuepressBlogDemo 文件夹的内容拷贝到仓库二，并在根目录下建立 deploy.sh 文件，内容以下：
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 若是是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 若是你想要部署到 https://USERNAME.github.io
git push -f git@github.com:USERNAME/USERNAME.github.io.git master

# 若是发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -

修改仓库二中的 deploy.sh 发布脚本

把文件中的 USERNAME 改为 Github 帐号名，例如个人帐号名是 zhangyunchencc，那么就能够改成：

# 若是你想要部署到 https://USERNAME.github.io
git push -f git@github.com:zhangyunchencc/zhangyunchencc.github.io.git master

这样仓库二和仓库一就创建了关联。

简单说两者的关系是：仓库一负责显示网站内容，咱们不须要改动它；平常开发和新增内容，都在仓库二中，并经过 npm run deploy 命令，将代码发布到仓库一。

在 package.json 文件夹中添加发布命令（使用工具包的请忽略）

"scripts": {
  "deploy": "bash deploy.sh"
}

大功告成，运行发布命令

npm run deploy

此时打开 Github Settings 中下面的连接: https://zhangyunchencc.github.io/ 便可看到本身的主页啦~

clipboard.png

PC 端页面是这样的：

clipboard.png

手机端页面是这样的：

clipboard.png

6、发布到本身的我的域名

若是你不知足于 https://zhangyunchencc.github... 这样的域名，想要一个本身我的的专属域名，好比 http://www.zhangyunchen.cc/ ，毕竟一些大牛（阮一峰 http://www.ruanyifeng.com/blog/） 都是本身名字的网址哦，很方便很酷呢 😎

下面跟着步骤一步步来就好啦~

购买域名

推荐在 新网 或 万网 购买

我是在新网购买的，下面以新网为例，万网是相似的。

购买完成后进入管理后台，点击 ”解析“ 按钮，添加下面两条内容：

clipboard.png

clipboard.png

注意这里有坑！！！在 万网 购买域名的同窗请注意，第二条记录中的 请用 @ 代替，万网不支持

记录值里的 IP 能够经过 ping 本身的域名获得：

ping www.username.github.io

添加 CNAME 文件

在仓库一 USERNAME.github.io 中找到 Settings > Custom domain 把 www.zhangyunchen.cc 添加进去便可。

clipboard.png

大功告成，打开 https://www.zhangyunchen.cc 看一下吧~~~

7、最后

  • 你须要一些 Markdown 语法的基础知识；
  • 你须要一个 Github 帐号，并在里面建立两个 repo
  • Github 须要添加 ssh key，遇到问题能够百度解决；
  • 我的博客不仅能够用来写技术相关的内容，也能够有本身写的文章、随笔，甚至上传一些照片。

以上，

Chen | 2018.10

联系我们 沪ICP备2021010478号-7