链接地址:你好,戴先生 (daijiyong.github.io)
功能简约、界面大气
往往一个开放的网站需要三个基本要素
一般情况下,前两者都是需要花钱的
通过GitHub或者Gitee公开项目可以实现前两者
我们只需要准备网站内容就行了
网站的框架使用开源框架vuepress实现
我选用是Vuepress Theme Hope主题
vue项目可以生成一个静态文件夹
这个文件夹放到任何地方只要能用浏览器打开就是一个完整的网站
GitHub刚好提供了这个功能
我们选择把它放到GitHub的公开仓库
就是一个开放访问的个人网站了
具体内容我们手敲文字就可以了
在你自己电脑上的某文件夹内创建 vuepress-theme-hope 项目
即创建一个文件夹
然后打开命令行执行下边的这条命令
npm install vuepress-theme-hope@next docs
执行以下命令启动
npm run docs:dev
浏览器输入http://localhost:8080即可访问默认界面
重点配置文件如下
在docs目录下管理自己的文章
文章采用markdown格式的文档编写
具体格式可参考vuepress theme hope官网文档
界面布局优化亦可参考vuepress theme hope官网文档
如果喜欢我的界面布局
可公众号内回复:vuepress
获取我的完整项目包代码
假如你的github账号名是xxx
那么你就创建一个叫xxx.github.io的公开项目
如此才能直接通过xxx.github.io这个网址直接访问接下来发布的网站
在vue项目的根目录创建一个文件deploy.sh
具体内容如下
#!/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执行以下这个文件就行了
执行命令如下
bash deploy.sh
这就部署到 https://USERNAME.github.io了
USERNAME就你的GitHub项目名称
进入GitHub的仓库就能看到提交的内容了
进入仓库settings/pages,即可发布你的网站了
https://USERNAME.github.io
浏览器输入这个网址,就能看到你的个人网站了
---end---