├── README.md ├── deploy.sh ├── docs ├── .vuepress │ ├── config.js │ └── public │ │ ├── images │ │ ├── eg1.png │ │ ├── eg12.png │ │ ├── eg13.png │ │ ├── eg14.png │ │ ├── eg2.png │ │ ├── eg3.png │ │ ├── eg4.png │ │ ├── eg5.png │ │ ├── eg6.png │ │ ├── eg7.png │ │ ├── eg8.png │ │ └── photo.jpg │ │ └── manifest.json ├── README.md ├── accumulate │ └── README.md ├── algorithm │ └── README.md ├── guide.md └── others │ └── README.md └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # VuePress 快速上手 2 | 3 | ### 步骤一：git clone git@mobike.io:zhangyunchen/vuepress-devkit.git 4 | 5 | ### 步骤二：运行 npm install 6 | 7 | ### 步骤三：运行 npm run dev 8 | 9 | ### 最后：打开 http://localhost:8080/ 即可看到一个 Vue 文档风格的网站 10 | 11 | #### PS. 想获取更多部署方法，可以点击“快速上手” 第五节部署上线，按步骤操作即可 -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | # 生成静态文件 7 | npm run build 8 | 9 | # 进入生成的文件夹 10 | cd docs/.vuepress/dist 11 | 12 | # 如果是发布到自定义域名 13 | echo 'www.zhangyunchen.cc' > CNAME 14 | 15 | git init 16 | git add -A 17 | git commit -m 'deploy' 18 | 19 | # 如果你想要部署到 https://.github.io 20 | git push -f git@github.com:zhangyunchencc/zhangyunchencc.github.io.git master 21 | 22 | # 如果发布到 https://.github.io/ REPO=github上的项目 23 | # git push -f git@github.com:/vuepress.git master:gh-pages 24 | 25 | cd - 26 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: '个人主页', 3 | description: 'Personal Website', 4 | head: [ // 注入到当前页面的 HTML 中的标签 5 | ['link', { rel: 'icon', href: '/images/photo.jpg' }], 6 | ['link', { rel: 'manifest', href: '/images/photo.jpg' }], 7 | ['link', { rel: 'apple-touch-icon', href: '/images/photo.jpg' }], 8 | ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache'}], 9 | ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache,must-revalidate'}], 10 | ['meta', { 'http-quiv': 'expires', cotent: '0'}] 11 | ], 12 | serviceWorker: true, // 是否开启 PWA 13 | base: '/', // 部署到github相关的配置 14 | markdown: { 15 | lineNumbers: true // 代码块是否显示行号 16 | }, 17 | themeConfig: { 18 | nav:[ // 导航栏配置 19 | {text: '前端基础', link: '/accumulate/' }, 20 | {text: '算法题库', link: '/algorithm/'}, 21 | {text: '诗和远方', link: '/others/'}, 22 | {text: '微博', link: 'https://baidu.com'} 23 | ], 24 | // sidebar:{ 25 | // '/accumulate/': [ 26 | // { 27 | // title: '前端积累', 28 | // children: [ 29 | // '/accumulate/1.html', 30 | // '/accumulate/2.html', 31 | // '/accumulate/3.html', 32 | // '/accumulate/4.html', 33 | // '/accumulate/5.html', 34 | // '/accumulate/6.html', 35 | // '/accumulate/7.html', 36 | // '/accumulate/8.html', 37 | // '/accumulate/9.html', 38 | // '/accumulate/10.html', 39 | // '/accumulate/11.html', 40 | // ] 41 | // } 42 | // ], 43 | // '/algorithm/': [ 44 | // '/algorithm/', 45 | // { 46 | // title: '第二组侧边栏下拉框的标题1', 47 | // children: [ 48 | // '/algorithm/' 49 | // ] 50 | // } 51 | // ] 52 | // }, 53 | sidebar: 'auto', // 侧边栏配置 54 | sidebarDepth: 2 55 | } 56 | }; -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg1.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg12.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg13.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg14.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg2.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg3.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg4.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg5.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg6.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg7.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/eg8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/eg8.png -------------------------------------------------------------------------------- /docs/.vuepress/public/images/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyunchencc/vuepress-devkit/28fe723127c2e2605d7304584530439d8ab63a8f/docs/.vuepress/public/images/photo.jpg -------------------------------------------------------------------------------- /docs/.vuepress/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "张三", 3 | "short_name": "张三", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "background_color": "#2196f3", 7 | "description": "张三的个人主页", 8 | "theme_color": "blue", 9 | "icons": [ 10 | { 11 | "src": "./photo.jpg", 12 | "sizes": "144x144", 13 | "type": "image/png" 14 | } 15 | ], 16 | "related_applications": [ 17 | { 18 | "platform": "web" 19 | }, 20 | { 21 | "platform": "play", 22 | "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /images/photo.jpg 4 | actionText: 快速上手 → 5 | actionLink: guide.html 6 | features: 7 | - title: 简洁至上 8 | details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 9 | - title: Vue驱动 10 | details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。 11 | - title: 高性能 12 | details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。 13 | footer: MIT Licensed | Copyright © 2018-present Evan You 14 | --- 15 | 16 | :tada: :100: 17 | 18 | ::: tip 提示 19 | this is a tip 20 | ::: 21 | 22 | ::: warning 注意 23 | this is a tip 24 | ::: 25 | 26 | ::: danger 警告 27 | this is a tip 28 | ::: 29 | 30 | ``` js 31 | 34 | ``` -------------------------------------------------------------------------------- /docs/accumulate/README.md: -------------------------------------------------------------------------------- 1 | # 前端积累 2 | 3 | ## html 4 | ## js 5 | ## css -------------------------------------------------------------------------------- /docs/algorithm/README.md: -------------------------------------------------------------------------------- 1 | # 算法题库 2 | 3 | ## 冒泡排序 -------------------------------------------------------------------------------- /docs/guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 手把手教你使用 VuePress 搭建个人博客 3 | sidebar: auto 4 | sidebarDepth: 2 5 | --- 6 | 7 | # 手把手教你使用 VuePress 搭建个人博客 8 | 9 | ::: tip 提示 10 | 有阅读障碍的同学，可以跳过第一至四节，下载我写好的[工具包](https://github.com/zhangyunchencc/vuepress-devkit.git): 11 | `git clone https://github.com/zhangyunchencc/vuepress-devkit.git` 然后从第五节开始看。 12 | ::: 13 | 14 | ## 一、为什么你需要一个博客？ 15 | 优秀的程序员都在写博客，写博客有很多好处： 16 | - 帮助自己梳理、总结、理解知识点（个人提升） 17 | - 帮助别人理解知识点（好人一生平安） 18 | - 简历更好看，更多面试机会（升职加薪） 19 | 20 | ## 二、什么是 VuePress，为什么要使用 VuePress ？ 21 | **VuePress** 是尤雨溪（vue.js 框架作者）4月12日发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 [VuePress中文网](https://vuepress.docschina.org/) 22 | 23 | 其实类似的建站工具有很多，比如 WordPress、Jekyll、Hexo 等，其中 WordPress 需要自己购买虚拟主机，不考虑；Jekyll 是 Github-Page 默认支持的，听说操作比较复杂，没有用过不做过多评价了；Hexo 之前一直在用，但一直觉得主题不好看，风格不够简洁优雅。自从遇见 VuePress，嗯，就是它了~ 24 | 25 | VuePress 有很多优点： 26 | - 界面简洁优雅（个人感觉比 HEXO 好看） 27 | - 容易上手（半小时能搭好整个项目） 28 | - 更好的兼容、扩展 Markdown 语法 29 | - 响应式布局，PC端、手机端 30 | - Google Analytics 集成 31 | - 支持 PWA 32 | 33 | ## 三、开始搭建 34 | 35 | ### 创建项目文件夹 36 | 可以右键手动新建，也可以使用 mkdir 命令新建： 37 | 38 | mkdir vuepressBlogDemo 39 | 40 | ### 全局安装 VuePress 41 | 42 | npm install -g vuepress 43 | 44 | ### 进入 vuepressBlogDemo 文件夹，初始化项目 45 | 使用 `npm init` 或 `npm init -y`（默认yes） 46 | 47 | npm init -y 48 | 49 | ### 创建文件夹和文件 50 | 在 vuepressBlogDemo 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示： 51 | 52 | vuepressBlogDemo 53 | ├─── docs 54 | │ ├── README.md 55 | │ └── .vuepress 56 | │ ├── public 57 | │ └── config.js 58 | └── package.json 59 | 60 | ### 在 config.js 文件中配置网站标题、描述、主题等信息 61 | 62 | ```js 63 | module.exports = { 64 | title: 'Chen\'s blog', 65 | description: '我的个人网站', 66 | head: [ // 注入到当前页面的 HTML 中的标签 67 | ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标) 68 | ], 69 | base: '/', // 这是部署到github相关的配置 70 | markdown: { 71 | lineNumbers: false // 代码块显示行号 72 | }, 73 | themeConfig: { 74 | nav:[ // 导航栏配置 75 | {text: '前端基础', link: '/accumulate/' }, 76 | {text: '算法题库', link: '/algorithm/'}, 77 | {text: '微博', link: 'https://baidu.com'} 78 | ], 79 | sidebar: 'auto', // 侧边栏配置 80 | sidebarDepth: 2, // 侧边栏显示2级 81 | } 82 | }; 83 | ``` 84 | 85 | ### 在 package.json 文件里添加两个启动命令 86 | ```json 87 | "scripts": { 88 | "dev": "vuepress dev docs", 89 | "build": "vuepress build docs" 90 | } 91 | ``` 92 | 93 | ### 一切就绪 :tada: 跑起来看看吧 94 | 95 | npm run dev 96 | 97 | ## 四、一些小亮点 98 | 完成了基础搭建后，就可以在docs目录下新建 `.md` 文件写文章了（.md 是 Markdown 语法文件，你需要知道 Markdown 的一些基本写法，很简单，这里给大家一份 [Markdown 语法整理大集合](https://www.jianshu.com/p/b03a8d7b1719)） 99 | 100 | 下面给大家安利一些实用的方法。 101 | 102 | ### 代码块高亮 103 | 在 .md 文件中书写代码时，可在 \`\`\` 后增加 js、html、json等格式类型，代码块即可按照指定类型高亮 104 | 105 | 代码： 106 | 107 |

``` js
108 | export default {
109 |   data () {
110 |     return {
111 |       msg: 'Highlighted!'
112 |     }
113 |   }
114 | }
115 | ```

116 | 117 | 效果： 118 | ``` js 119 | export default { 120 | data () { 121 | return { 122 | msg: 'Highlighted!' 123 | } 124 | } 125 | } 126 | ``` 127 | 128 | ### 自定义容器 129 | 130 | 代码： 131 | 132 | ::: tip 提示 133 | this is a tip 134 | ::: 135 | 136 | ::: warning 注意 137 | this is a tip 138 | ::: 139 | 140 | ::: danger 警告 141 | this is a tip 142 | ::: 143 | 144 | 效果： 145 | ::: tip 提示 146 | this is a tip 147 | ::: 148 | 149 | ::: warning 注意 150 | this is a tip 151 | ::: 152 | 153 | ::: danger 警告 154 | this is a tip 155 | ::: 156 | 157 | ### 支持 Emoji 158 | 代码： 159 | 160 | :tada: :100: :bamboo: :gift_heart: :fire: 161 | 162 | 效果： 163 | :tada: :100: :bamboo: :gift_heart: :fire: 164 | 165 | :point_right: 这里有一份 [Emoji 大全](https://www.webpagefx.com/tools/emoji-cheat-sheet/) 166 | 167 | ### 支持 PWA 168 | VuePress 默认支持 [PWA](https://segmentfault.com/a/1190000012353473)，配置方法如下： 169 | 170 | config.js 文件中增加 171 | 172 | ```js 173 | head: [ // 注入到当前页面的 HTML 中的标签 174 | ['link', { rel: 'manifest', href: '/photo.jpg' }], 175 | ['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }], 176 | ], 177 | serviceWorker: true // 是否开启 PWA 178 | ``` 179 | 180 | public 文件夹下新建 manifest.json 文件，添加 181 | 182 | ```json 183 | { 184 | "name": "张三", 185 | "short_name": "张三", 186 | "start_url": "index.html", 187 | "display": "standalone", 188 | "background_color": "#2196f3", 189 | "description": "张三的个人主页", 190 | "theme_color": "blue", 191 | "icons": [ 192 | { 193 | "src": "./photo.jpg", 194 | "sizes": "144x144", 195 | "type": "image/png" 196 | } 197 | ], 198 | "related_applications": [ 199 | { 200 | "platform": "web" 201 | }, 202 | { 203 | "platform": "play", 204 | "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" 205 | } 206 | ] 207 | } 208 | ``` 209 | 210 | 最后在 iPhone 的 safrai 浏览器中打开本网站，点击 `+添加到主屏幕` 就能在桌面看到一个像原生 App 一样的图标（感觉自己写了一个 App 有木有 :smile:） 211 | 212 | ## 五、部署上线 213 | 说了这么多都是在本地进行的，现在我们要把本地的内容推送到某个服务器上，这样只要有网络，就可以随时随地看自己的网站了。 214 | 215 | 一般来说，有两种方案可供选择： 216 | 1. 自己买一个服务器，阿里云、腾讯云等，这种方式的好处是速度有保证、可以被搜索引擎收录，坏处是要花钱啊 :moneybag: 土豪同学可以考虑。 217 | 2. 使用 [Github Pages](https://pages.github.com/) 。什么是 Github Pages 呢？简单说就是 Github 提供的、用于搭建个人网站的静态站点托管服务。很多人用它搭建个人博客。这种方式的好处是免费、方便，坏处是速度可能会有些慢、不能被国内的搜索引擎收录。 218 | 219 | 最终我选择了方案2，下面将给大家讲解如何使用 Github Pages 服务。 220 | 221 | ### 登陆 [Github](https://github.com/) 222 | 打开 github 网站，登陆自己的 github 账号（没有账号的快去注册并面壁思过作为一个优秀的程序员为啥连一个github账号都没有） 223 | 224 | 接着我们新建两个仓库： 225 | 226 | ### 新建仓库一： USERNAME.github.io （不用克隆到本地） 227 | 228 | ！！！注意：USERNAME 必须是你 Github 的账号名称，不是你的名字拼音，也不是你的非主流网名，不要瞎起，要保证和Github账号名一模一样！ 229 | 230 | 例如我的 Github 账号名称是 zhangyunchencc 231 | 232 | ![](/images/eg13.png) 233 | 234 | 那么新建仓库，Repository name 就填写为：zhangyunchencc.github.io 235 | 236 | ![](/images/eg14.png) 237 | 238 | 这个仓库建好后，不用克隆到本地，内容更新修改都在仓库二中进行。 239 | 240 | ### 新建仓库二：随便起一个名字，比如：vuepressBlog （克隆到本地） 241 | 242 | 这个项目是用来开发博客的，以后只需要改这个项目就够了。 243 | 244 | - 使用工具包的，将 [vuepress-devkit](https://github.com/zhangyunchencc/vuepress-devkit.git) 中的内容拷贝到 vuepressBlog 文件夹中 245 | 246 | - 自己从头搭建的，将 vuepressBlogDemo 文件夹的内容拷贝到仓库二，并在根目录下创建 deploy.sh 文件，内容如下： 247 | 248 | ```sh 249 | #!/usr/bin/env sh 250 | 251 | # 确保脚本抛出遇到的错误 252 | set -e 253 | 254 | # 生成静态文件 255 | npm run build 256 | 257 | # 进入生成的文件夹 258 | cd docs/.vuepress/dist 259 | 260 | # 如果是发布到自定义域名 261 | # echo 'www.yourwebsite.com' > CNAME 262 | 263 | git init 264 | git add -A 265 | git commit -m 'deploy' 266 | 267 | # 如果你想要部署到 https://USERNAME.github.io 268 | git push -f git@github.com:USERNAME/USERNAME.github.io.git master 269 | 270 | # 如果发布到 https://USERNAME.github.io/ REPO=github上的项目 271 | # git push -f git@github.com:USERNAME/.git master:gh-pages 272 | 273 | cd - 274 | ``` 275 | 276 | ### 修改仓库二中的 deploy.sh 发布脚本 277 | 278 | 把文件中的 USERNAME 改成 Github 账号名，例如我的账号名是 zhangyunchencc，那么就可以改为： 279 | 280 | ```sh 281 | # 如果你想要部署到 https://USERNAME.github.io 282 | git push -f git@github.com:zhangyunchencc/zhangyunchencc.github.io.git master 283 | ``` 284 | 285 | 这样仓库二和仓库一就建立了关联。 286 | 287 | 简单说二者的关系是：仓库一负责显示网站内容，我们不需要改动它；日常开发和新增内容，都在仓库二中，并通过 npm run deploy 命令，将代码发布到仓库一。 288 | 289 | 290 | ### 在 package.json 文件夹中添加发布命令（使用工具包的请忽略） 291 | 292 | ``` json 293 | "scripts": { 294 | "deploy": "bash deploy.sh" 295 | } 296 | ``` 297 | 298 | ### :clap: 大功告成，运行发布命令 299 | 300 | npm run deploy 301 | 302 | 此时打开 Github Settings 中下面的链接: [https://zhangyunchencc.github.io/](https://zhangyunchencc.github.io/) 即可看到自己的主页啦~ 303 | 304 | ![](/images/eg2.png) 305 | 306 | #### PC 端页面是这样的： 307 | ![](/images/eg3.png) 308 | 309 | #### 手机端页面是这样的： 310 | ![](/images/eg4.png=200x) 311 |

312 | 313 | 可以看到导航栏变成了左上角的小图标，可以打开和收起。 314 | 315 | ## 六、发布到自己的个人域名 316 | 如果你不满足于 https://zhangyunchencc.github.io/ 这样的域名，想要一个自己个人的专属域名，比如 http://www.zhangyunchen.cc/ ，毕竟一些大牛（阮一峰 [http://www.ruanyifeng.com/blog/](http://www.ruanyifeng.com/blog/)）都是自己名字的网址哦，很方便很酷呢 😎 317 | 318 | 下面跟着步骤一步步来就好啦~ 319 | 320 | ### 购买域名 321 | 推荐在 [新网](http://www.xinnet.com/domain/domain.html) 或 [万网](https://wanwang.aliyun.com/) 购买。 322 | 323 | 我是在新网购买的，下面以新网为例，万网是类似的。 324 | 325 | 购买完成后进入管理后台，点击 ”解析“ 按钮，添加下面两条内容： 326 | ![](/images/eg5.png) 327 | 328 | ![](/images/eg6.png) 329 | 330 | ::: warning 注意！这里有坑： 331 | 在万网购买域名的同学请注意，第二条记录中的 * 请用 @ 代替，万网不支持 * 332 | ::: 333 | 334 | 记录值里的 IP 可以通过 ping Github 的域名得到： 335 | 336 | ping www.username.github.io 337 | 338 | ### 修改仓库二中的 deploy.sh 文件 339 | 340 | 将仓库二中的 deploy.sh 文件的第 13 行反注释掉，并填上自己的域名，deploy.sh 文件的最终版： 341 | 342 | ```sh 343 | #!/usr/bin/env sh 344 | 345 | # 确保脚本抛出遇到的错误 346 | set -e 347 | 348 | # 生成静态文件 349 | npm run build 350 | 351 | # 进入生成的文件夹 352 | cd docs/.vuepress/dist 353 | 354 | # 如果是发布到自定义域名 355 | echo 'www.zhangyunchen.cc' > CNAME 356 | 357 | git init 358 | git add -A 359 | git commit -m 'deploy' 360 | 361 | # 如果你想要部署到 https://.github.io 362 | git push -f git@github.com:zhangyunchencc/zhangyunchencc.github.io.git master 363 | 364 | # 如果发布到 https://.github.io/ REPO=github上的项目 365 | # git push -f git@github.com:/vuepress.git master:gh-pages 366 | 367 | cd - 368 | 369 | ``` 370 | 371 | 此时，我们运行 npm run deploy 即可发布到自己的专属域名啦~ 372 | 373 | ### :clap: 大功告成，打开 [https://www.zhangyunchen.cc](https://www.zhangyunchen.cc) 看一下吧~~~ 374 | 375 | 拥有自己专属域名的个人博客感觉很酷哦~ 376 | 377 | 写一些文章，记录一点生活，把自己的网站发给同学朋友看看吧！ :sunglasses: 378 | 379 | ## 七、最后 380 | - 你需要一些 [Markdown](https://www.jianshu.com/p/b03a8d7b1719) 语法的基础知识； 381 | - 你需要一个 [Github](https://github.com/) 账号，并在里面创建两个 repo； 382 | - Github 需要添加 ssh key，第一次使用的同学遇到问题可以百度解决； 383 | - 个人博客不只可以用来写技术相关的内容，也可以有自己写的文章、随笔，甚至上传一些照片。 384 | 385 | 我的 [vuepress-devkit](https://github.com/zhangyunchencc/vuepress-devkit.git) 已经开源放在了 Github 上，还有很多想要增加的功能，例如添加评论模块、自动生成侧边栏目录、增加网站分析工具等等，在这里欢迎大家 Star 或者 Fork 。 386 | 387 | 以上， 388 | 389 | 390 | 张韵晨 | Front End Engineer | 2018.10 391 | 392 | 393 | -------------------------------------------------------------------------------- /docs/others/README.md: -------------------------------------------------------------------------------- 1 | # 诗 2 | 3 | # 远方 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuepressBlog", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "vuepress dev docs", 8 | "dev": "vuepress dev docs", 9 | "build": "vuepress build docs", 10 | "deploy": "bash deploy.sh" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "vuepress": "^0.14.4" 17 | } 18 | } 19 | --------------------------------------------------------------------------------