搭建一个极简静态网站


基于vuepress搭建一个属于自己的极简静态网站,可以作为自己的博客、线上笔记文档等
成品展示

vuepress官网

需要的软件

开始前你需要确保自己的电脑上已经安装了GitNode.js

注意:请确保你的 Node.js 版本 >= 8.6。

正式开始

安装vuepress

在你的磁盘根目录创建一个文件夹用来存放你的静态网站
如:

进入你创建的文件夹,鼠标右键选择git的命令窗口

输入全局安装命令

npm install -g vuepress


输入后回车等待安装完成

验证vuepress

在git命令窗口输入

vuepress

如果出现以下内容说明你安装成功了O(∩_∩)O

创建网站首页

在根目录打开git命令窗口
执行

# 新建一个docs文件夹
mkdir docs
# 进入docs文件夹目录
cd docs/
# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

打开README.md文件夹(我这里用的是VSCode),可以看到Hello VuePress!

运行vuepress

git命令行切换到docs目录执行

vuepress dev

可以看到vuepress开启的端口(默认是8080端口,如果8080端口被占用vuepress就会自动切换到未被占用端口)

浏览器输入地址可以看到

vuepress配置文件

在docs文件夹下执行

# 在docs文档目录下创建一个 .vuepress 目录,所有 VuePress 相关的文件都将会被放在这里
mkdir .vuepress
# 进入 .vuepress 文件夹
cd .vuepress/
# 创建 VuePress 网站配置文件 
touch config.js
# 切换到blog根目录执行
cd ../..
# 执行初始化目录
npm init -y

此时项目结构应该是:

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

打开config.js文件夹
将下面代码粘贴进去

module.exports = {
  title: 'Hello VuePress', // 标题
  description: 'Just playing around' // 描述
}

运行vuepress看看效果

切换到docs目录下
执行

vuepress dev

配置首页

打开docs目录下的README.md文件

将以下内容粘贴进去

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
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
---

在运行vuepress将看到以下效果

了解markdown

这里你需要了解以下markdown扩展

首页图片和favicon.png图片

进入 .vuepress目录下新建public文件夹

将准备好的两个图标放到public文件夹下面(你可以到easyicon找自己喜欢的图标)

修改docs下面REDEME.md文件

修改config.js文件

head: [
    ['link', { rel: 'icon', href: '/logo.png' }]
  ]

重新运行vuepress查看效果

导航配置

在config.js 中增加以下代码

themeConfig: {
    sidebarDepth: 2, //最大嵌套深度
    lastUpdated: 'Last Updated', //显示最后更新时间
    nav: [
      //单个导航
      { text: '首页', link: '/' }, //内部跳转
      { text: '关于', link: '/about/' }, //关于页面
      { text: 'GitHub', link: 'https://github.com/chenxinshinian' }, //外部跳转
      {
       //下拉列表
        text: '语言',
        items: [
          { text: 'chinese', link: '/language/chinese/' },
          { text: 'japanese', link: '/language/japanese/' }
        ]
      },
      // 下拉列表显示分组
      {
        text: '分享',
        items: [
        { 
            text: '索引', 
            items: [
            { text: 'Java', link: '/Java/' },
            { text: 'JavaScript', link: '/JavaScript/' }
            ] 
        }
        ]  
    }
    ],   
    sidebar: {
      '/Java/': [   
          '', // 代表/Java/
          'java1', 
          'java2'
      ],
      '/JavaScript/': [   
        '', // 代表 /JavaScript/
        'js1' 
    ]
  }
  }

运行vuepress后应该出现效果:

这时点击导航栏应该是显示404,这是英文虽然配置了导航但是但是响应的目录还没有创建

导航配置对应的目录结构:

注意:每个导航下面都要有一个README.md文件作为导航的首页

其他页面内容


页面效果:

更多详细配置

部署

教程部署在github pages上面
登录github创建一个仓库

格式为<username>.github.io
最后点击最小面的绿色按钮创建

github的操作就结束了
接下来正在你的网站根目录创建
deploy.sh文件,将下面的内容粘贴进去

#!/usr/bin/env sh

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

# 生成静态文件
npm run docs:build

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

# 如果是发布到自定义域名
# echo 'www.example.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>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

保存后双击运行deploy.sh文件
然后 浏览器输入

你就部署成功了

扩展

增加返回顶部效果


步骤过于简单根据官方提示安装插件就可以了

添加评论功能

安装valine

在blog目录下打开git命令窗口,依次执行下面两条命令

# Install leancloud's js-sdk
npm install leancloud-storage --save
# Install valine
npm install valine --save

接下来在.vuepress文件夹下创建components文件夹,再到components文件夹下面创建Valine.vue文件

打开Valine.vue文件将下面内容粘贴进去

<template>
  <div id="vcomments"></div>
</template>

<script>
export default {
  name: 'Valine',
  mounted: function(){
    // require window 
    const Valine = require('valine');
    if (typeof window !== 'undefined') {
      this.window = window
      window.AV = require('leancloud-storage')

    }

    new Valine({
      el: '#vcomments' ,
      appId: '',// 这里填你的appId
      appKey: '', // 这里填你的appKey
      notify:false, 
      verify:false, 
      avatar:'mm', 
      placeholder: '说点什么...' 
    });
  },
}
</script>

接下来登录或者在注册leancloud
之后进入控制台,点击左下角创建应用

应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP ID和APP Key了:

添加你的域名

将你的app id 和app key粘贴到Valine.vue文件里的对应位置

然后在你想加入评论的页面加上

<Valine></Valine>

如我在首页README.md文件中添加

然后双击deploy.sh文件,将他部署到github

效果

如果没有效果请清楚浏览器缓存或者更换浏览器访问


文章作者: 王彬
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 王彬 !
评论
 上一篇
免费科学上网 免费科学上网
—-(编辑于2020/4/7)开始—- 这三款目前我是用的是第三款, 剩下两款是备用的. 不上外网的时候记得关掉插件, 不然访问内网也会变慢 这三款插件我不敢保证能长期使用并且一直稳定, 不过你能上第一次外网, 那么就可以一直上外
2020-03-02
本篇 
搭建一个极简静态网站 搭建一个极简静态网站
基于vuepress搭建一个属于自己的极简静态网站,可以作为自己的博客、线上笔记文档等成品展示 vuepress官网 需要的软件开始前你需要确保自己的电脑上已经安装了Git和Node.js 注意:请确保你的 Node.js 版本 >
2020-01-27
  目录