vuepress搭建自己的博客

第一步 在github新建项目，配置域名路径

在github创建blog-demo项目，点击项目的setting，配置项目域名：

 

 选择主题后，一步一步操作，等待一会可以生成自己的地址了：

第二步 搭建自己的vuepress博客

全局安裝VuePress

npm install -g vuepress

//新建一个文件夹
mkdir new_project

//初始化项目
npm init -y  //-y 就是不用你不停打yes的意思

//在现有项目中安装
npm install -D vuepress

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

new_project
├─── docs
│   ├── README.md//首页内容
│   ├── blog//建.md写博客子页面内
│   └── .vuepress
│       ├── public//存放静态图片
│       └── config.js//配置网站标题、描述、主题等信息
└── package.json 

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

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

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

module.exports = {
    base: '/jxiaoshuai-blog-demo/',//这是我之前已经在github创建好的
    title: 'blog-demo',
    description: 'Vuepress blog demo', 
    dest:'dist',//npm run build打包路径
    themeConfig: {
        // 你的GitHub仓库，请正确填写
        repo: 'https://github.com/jxiaoshuai/blog-demo.git',
        // 自定义仓库链接文字。
        repoLabel: 'My GitHub',
        nav: [
            { text: 'Home', link: '/' },
            { text: 'FirstBlog', link: '/blog/FirstBlog.md' }
        ],
        sidebar: [
            ['/', '首页'],
            ['/blog/FirstBlog.md', '我的第一篇博客']
          ]
    }
}

base:部署站点的基础路径，如果你想让你的网站部署到一个子路径下，你将需要设置它。如 Github pages，如果你想将你的网站部署到 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/"，它的值应当总是以斜杠开始，并以斜杠结束。
base 将会自动地作为前缀插入到所有以 / 开始的其他选项的链接中，所以你只需要指定一次。 

title:网站的标题，它将会被用作所有页面标题的前缀，同时，默认主题下，它将显示在导航栏（navbar）上。
dest:打包路径

README.md

---
home: true
heroImage: /logo.png
heroText: 叶落森博客
tagline: yls
actionLink: /
features:
- title: 自我分析
  details: 一个初级的web前端开发工程师，一个有强迫症的码农
- title: IT技能
  details: 熟练使用vue全家桶，了解Webpack搭建自己的架子,了解React、Nodejs、Mysql
- title: 项目
  details: 联想tele话务系统、联想租赁商城、百应资产、校园图书商城
---

 第三步 推送到github

把咋们本地的vuepress博客项目npm run build  接着把打包好dist的文件，放到github clone下来的jxiaoshuai-blog-demo文件夹中，再push上去。 

在浏览器中打开：

 

使用与主题自定义样式修改

在.vuepress文件夹下新建styles文件夹，并在此文件夹下新建palette.styl文件

$accentColor =#7D26CD//默认主题颜色
$textColor = #2c3e50//默认字体颜色
$borderColor = #eaecef//默认边框颜色
$codeBgColor = #282c34//默认背景颜色
 
//示例修改相关样式f12找到需要修改的地方找到对应class类拿过来直接用就行了
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
  opacity :1
}

效果图如下：