大家好，我是戴先生 废话不说，直接上效果图
##效果图 获取完整代码，可公众号内回复：vuepress
链接地址：你好，戴先生 (daijiyong.github.io)
##为什么要个人网站
- 自媒体时代，人人都可以有自我对外展示的多个窗口
- 短视频横流，但是我们更需要将自己的知识和阅历沉淀成文字
- 边界渐模糊，但这里可以是完全属于自己的小世界，没有推送、不需要点赞
- 互联网的第一个十年已经过去，但是拥有一个个人网站仍然是一件很酷的事情
##网站功能
- 搜索
- 时间轴
- 顶部导航栏
- 侧边导航栏
- 文章目录
- 自定义主题色
- 其他功能
功能简约、界面大气
##网站原理
往往一个开放的网站需要三个基本要素
- 外网IP或者域名
- 一台服务器
- 网站内容（一堆能在浏览器运行或展示的文件）
一般情况下，前两者都是需要花钱的
通过GitHub或者Gitee公开项目可以实现前两者
我们只需要准备网站内容就行了
网站的框架使用开源框架vuepress实现
我选用是Vuepress Theme Hope主题
vue项目可以生成一个静态文件夹
这个文件夹放到任何地方只要能用浏览器打开就是一个完整的网站
GitHub刚好提供了这个功能
我们选择把它放到GitHub的公开仓库
就是一个开放访问的个人网站了
具体内容我们手敲文字就可以了
##准备工作
- 一个GitHub或gitee账号（以下以GitHub为例，建议用Gitee，国内服务器比较稳定）
- 一台安装了Node.js、git的电脑
- 会一点点markdown语法
##如何搭建
###初始化vue项目
在你自己电脑上的某文件夹内创建 vuepress-theme-hope 项目
即创建一个文件夹
然后打开命令行执行下边的这条命令
代码语言：javascript复制npm install vuepress-theme-hope@next docs
执行以下命令启动
代码语言：javascript复制npm run docs:dev
浏览器输入http://localhost:8080即可访问默认界面
###根据自己的喜好修改网站
重点配置文件如下
- docs/.vuepress/config.ts：网站配置文件
- docs/.vuepress/navbar.ts：顶部导航配置文件
- docs/.vuepress/sidebar.ts：侧边导航配置文件
- docs/.vuepress/theme.ts：主题相关配置文件
在docs目录下管理自己的文章
文章采用markdown格式的文档编写
具体格式可参考vuepress theme hope官网文档
界面布局优化亦可参考vuepress theme hope官网文档
如果喜欢我的界面布局
可公众号内回复：vuepress
获取我的完整项目包代码
###创建github仓库
假如你的github账号名是xxx
那么你就创建一个叫xxx.github.io的公开项目
如此才能直接通过xxx.github.io这个网址直接访问接下来发布的网站
##如何发布内容
在vue项目的根目录创建一个文件deploy.sh
具体内容如下
代码语言：javascript复制#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果你想要部署到 https://USERNAME.github.io
git push -f https://github.com/daijiyong/daijiyong.github.io.git master
cd -每次在修改或新增网站内容之后，
在vue项目目录中使用git bash执行以下这个文件就行了
执行命令如下
代码语言：javascript复制bash deploy.sh这就部署到 https://USERNAME.github.io了
USERNAME就你的GitHub项目名称
##发布网站
进入GitHub的仓库就能看到提交的内容了
进入仓库settings/pages，即可发布你的网站了
https://USERNAME.github.io
浏览器输入这个网址，就能看到你的个人网站了
---end---
