专栏首页小维博客利用Vuepress搭建一个精美好看的静态博客

利用Vuepress搭建一个精美好看的静态博客

准备环节:

工具1:安装nmp环境,下载地址:Node.js(这里就不详细讲了,网上也有很多教程) 工具2:这边建议安装Git命令窗口。官方下载很慢,之前有篇文章记录到咱们用淘宝的镜像站下载Git软件:Git 软件安装包下载太慢怎么办

当然,如果你嫌麻烦,也可以使用电脑自带的cmd(电脑Win+R 输入cmd即可唤起命令窗口)

验证是否安装成功: 命令窗口输入:node -vnpm -v 安装成功了的话会显示软件版本。

一、快速开始

1、安装

npm install -g vuepress  // 或者 yarn global add vuepress

2、新建一个项目文件夹,并且初始化

// 创建一个目录 叫 myblog
mkdir myblog
// 进入这个目录
cd myblog
// 初始化项目
npm init -y

3、创建博客相关目录

在myblog目录下新建docs目录,在docs目录里新建.vuepress文件夹,然后在里面创建config.js文件 用于存放配置信息

module.exports = {
  title: '小维博客',
  description: '欢迎来到我的博客'
}

4、在docs目录里面创建一个README.md的文件,输入内容

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

5、运行博客

在package.json里面添加脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
}

然后在终端(命令行工具)输入启动命令

npm run dev

二、设置导航栏

基础设置

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Languages',
        items: [
          { text: 'Chinese', link: '/language/chinese' },
          { text: 'Japanese', link: '/language/japanese' }
        ]
      }
    ]
  }
}

我的nav配置

nav: [
    { text: "首页", link: "/" },
    { text: "基础教程", link: "/basics/" },
    { text: "项目实战", link: "/project/" },
    { text: "零散文章", link: "/article/" },
    { text: "一起学习", link: "/association/" },
    { text: "前端架构师", link: "/architect/" },
    { text: "小维博客", link: "https://blog.isww.cn/" }
]

对应上面的导航栏,我们需要在docs文件夹下去新建basics、project、article、association、architect等文件夹

三、侧边栏设置

.
├─ README.md
├─ contact.md
├─ about.md
├─ foo/
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar/
   ├─ README.md
   ├─ three.md
   └─ four.md

配置:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: {
      '/foo/': [
        '',     /* /foo/ */
        'one',  /* /foo/one.html */
        'two'   /* /foo/two.html */
      ],

      '/bar/': [
        '',      /* /bar/ */
        'three', /* /bar/three.html */
        'four'   /* /bar/four.html */
      ],

      // fallback
      '/': [
        '',        /* / */
        'contact', /* /contact.html */
        'about'    /* /about.html */
      ]
    }
  }
}

四、添加head配置和自定义样式

静态文件要放到.vuepress/public目录下

// 添加浏览器图标
head: [
    ["link", { rel: "icon", href: "/logo.png" }],
]

自定义样式可以放到.vuepress/styles/index.styl下

.theme-default-content 
  h1
    border-bottom  3px solid rgb(0, 172, 193)
    padding 20px 0px 20px 0px
    font-size 24px

 
.theme-default-content 
  h2
    border-bottom  2px solid rgb(0, 172, 193)
    padding 15px 0px 15px 0px;
    font-size 20px
 
.theme-default-content 
  p 
    margin: 15px 0px 15px 0px;


/* PrismJS 1.17.1
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
    color: #f8f8f2;
    background: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: slategray;
}

.token.punctuation {
    color: #f8f8f2;
}

.namespace {
    opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
    color: #f92672;
}

.token.boolean,
.token.number {
    color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
    color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
    color: #e6db74;
}

.token.keyword {
    color: #66d9ef;
}

.token.regex,
.token.important {
    color: #fd971f;
}

.token.important,
.token.bold {
    font-weight: bold;
}
.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

五、部署上线

我们将代码部署到Coding上,需要完成的步骤有:

1、注册一个coding账号 官网 coding.net 2、为coding生成一个ssh公钥 3、编写脚本将代码自动上传到coding 4、开启coding静态page服务,绑定私有域名

生成ssh的过程:

1、进入到自己home目录下的.ssh目录,如果没有就自己新建一个

windows一般在这个位置: C:\Users\用户名\.ssh  
Mac: ~\.ssh

2.生成ssh key,在终端执行命令

# "-t rsa"表示使用密钥的加密类型,还可以为dsa;-C设置注释文字,
比如你的邮箱“YourEmail”,不一定要是github注册邮箱

$ssh-keygen -t rsa -C "${YourEmail}"                                    

# 直接回车
Enter file in which to save the key (/Users/faner/.ssh/id_rsa): 
# 输入密钥文件授权密码
Enter passphrase (empty for no passphrase):  
# 确认密钥文件授权密码                        
Enter same passphrase again:                                           
Your identification has been saved in /Users/faner/.ssh/id_rsa.
Your public key has been saved in /Users/faner/.ssh/id_rsa.pub.

生成好以后,你需要将你 .ssh目录下的.pub文件打开,里面有公钥,你需要把这个公钥配置到coding上面 接下来,需要在.ssh里面新增一个config文件,文件配置格式如下:

# Host自己填一个名称 不要带中文就行
Host isww
# 这里是网站地址
HostName e.coding.com
# github对应的email或者用户名
User git
# coding对应的私钥
IdentityFile ~/.ssh/id_rsa_isww_github_io

编写一个deploy.sh的脚本文件(脚本一键更新博客)

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

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

# 如果是发布到自定义域名
echo '这里填你需要绑定的域名' > CNAME


git init
git config user.name "这里填你coding的名字"
git config user.email "这里填你coding的邮箱"
git add -A
git commit -m 'deploy-coding'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@dadifeihong:dadifeihong/dadifeihong.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
git push -f git@dadifeihong-coding:dadifeihong/nodeingfe.git master
cd -

平时需要用到的命令:

启用本地测试:vuepress dev docs

生成本地静态网页网页:vuepress build docs

运行脚本上传网页静态文件:bash deploy.sh

版权声明:本站原创文章 利用Vuepress搭建一个精美好看的静态博客 由 小维 发表! 转载请注明:利用Vuepress搭建一个精美好看的静态博客 - 小维的个人博客 部分素材来源于网络,如有侵权请联系删除!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 搭建自己的技术博客系列(一)使用 hexo 搭建一个精美的静态博客

    https://github.com/ppoffice/hexo-theme-icarus

    黄小斜学Java
  • 手把手教你用vuepress搭建自己的网站(1)

    如果说阅读是知识的输入,那么写作就是知识的输出,输出是一个内化知识理解的过程,有些知识,一问,知道,一动手,不会,看似简单,一看就会,一做就废,凡是不被自己吸收...

    itclanCoder
  • VuePress +Gitee 快速搭建个人博客

    其实很简单就是拿来主义。首先你要知道有哪些工具可以搭建博客;然后你可通过搜索引擎搜索官方文档,动动手指就可以本地运行起来。但是运行起来的只是个 demo ,你的...

    不安分的猿人
  • VuePress搭建技术网站与个人博客

    ②. Docsify / Docute: 同样都是基于 Vue,然而它们都是完全的运行时驱动,因此对 SEO 不够友好

    前端达人
  • 为什么人家的开源项目文档如此炫酷?原来用的是这款神器!

    VuePress是Vue驱动的静态网站生成器。对比我们的Docsify动态生成网站,对SEO更加友好。

    macrozheng
  • 如何快速搭建好看的个人博客(完整配置与源码)

    博客地址 程序员成长指北(http://www.inode.club/) 可以先体验下。

    coder_koala
  • 5 分钟搭建一个简洁优雅的静态博客

    一开始我遇到这个问题,总觉得自己弄个博客,太麻烦了,也不一定坚持写下去,直接在平台上写得了。于是 CSDN、简书、知乎上开始写。

    somenzz
  • 使用vuepress-6小时搭建一个完全免费的个人网站

    当然也可以自己写不用vuepress,自己写代码然后通过githubPages也是可以的,只是使用vuepress相对来说时间快一点,他生成的网站也是响应式的。

    _kyle
  • 超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。

    庞小明
  • 超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。

    游魂
  • 借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站

    因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型,CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项...

    夜尽天明
  • [原创]VuePress教程之官方博客主题与插件简介

    VuePress Core Team 的成员 Billy: 除了 VuePress 核心以外,我负责官方博客插件与主题的开发。

    极客中心
  • 腾讯云静态网站托管之搭建 VuePress

    本文档介绍通过腾讯云静态网站托管服务搭建一个 VuePress 网站,并使用云开发 CLI 工具管理部署 VuePress 网站。

    陌涛
  • 基于 Serverless 的 VuePress 极简静态网站

    之前用过 Docsify + Serverless Framework 快速创建个人博客系统,虽然 docsify 也是基于 Vue,然而它是完全的运行时驱动,...

    Aceyclee
  • 一键部署!这样搭建一个文档网站真的很简单!

    最近笔者在复习 JavaScript 基础知识,刚看完 《JavaScript 高级程序设计(第四版)》,想再找一些优秀代码库巩固一下学到的内容,自然而然的就想...

    程序员小强
  • 使用VuePress 搭建个人博客

    VuePress 是一个静态网站生成器,包含由Vue驱动的主题系统和插件API,同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePre...

    goodspeed
  • 团队技术文档构建利器vuepress上手实践

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    csxiaoyao
  • 基于 Serverless 的 VuePress 极简静态网站

    之前用过 Docsify + Serverless Framework 快速创建个人博客系统,虽然 docsify 也是基于 Vue,然而它是完全的运行时驱动,...

    腾讯云serverless团队
  • 不敢想,做个博客竟如此简单!

    大家好,我是鱼皮,最近买了个不错的域名,为了不浪费它呢,我心血来潮打算做个博客网站。

    程序员鱼皮

扫码关注云+社区

领取腾讯云代金券