背景:
- 一直想搭建帅气、高端的个人博客,然后在上次某些原因,就放弃搭建博客,因为再次见识到大神的博客,果断再次心动了
第一步
- github pages介绍
- github是项目托管网站,列出了项目的源文件,所以github 有一个pages功能,可以自定义主页,用来代替默认的列出源列表的这个页面
所以,github Pages就可以被认为是用户编写、托管的github上的静态网页
- github相关官方文档
- github提供两种类型的主页
- 个人或组织主页
- 页面内容位于 master下
- 项目主页
- 页面内容位于每个项目的master下
- (PS:我们创建的博客属于个人页面,但也可以创建为项目主页)
第二步,注册github账号
- 申请github的账号,github官网——>PS:使用火狐或者谷歌浏览器,否则有可能无法注册
- 填写账号相关信息
- 账号名
- 邮箱
- 密码
- 第二步,填写完信息后,选择你的个人计划
- 第三步,就是选择就是你做啥的,专业的啥啥啥
- 第四步,就是去你的邮箱验证你的账号即可
- 然后登录你的github账号,创建一个新的存储库,并设置私人可看,还是公共可看
第三步,安装git客户端
第四步,安装Node
- 在装完git客户端之后,下面就是装Node了
- Hexo是基于Node环境的静态博客,npm工具是必不可少的
- Node下载地址
- 下载完,直接安装即可(比较简单,就不截图了)
- 然后在git客户端执行 node -v ,会显示出你的安装版本,这就表示安装成功了
- PS:有可能在执行 node -v 没显示出你的版本号,可以重新打开下你的git客户端,再来执行该命令
第五步,安装hexo
- 在安装完成node之后,在你的本地电脑上新建一个存放blog的文件夹(自己要记得存放在哪,等会要用到该路径),然后 cd 到该路径下
- 小技巧:
- 路径,可以用tab键补全哦!!!
- 在切换到你的blog目录下后,执行 npm i -g hexo 命令
- 建议用cnpm安装,会相对快一些,有可能你的cnpm命令没有存在,就需要你安装下cnpm命令
安装cnpm命令
npm install cnpm -g --registry=https://registry.npm.taobao.org
然后在执行
cnpm i -g hexo
- 当然你也可以直接执行npm i -g hexo 命令,但是很慢很慢......(反正我是很慢的那种)
- 然后确认成功,执行命令 hexo -v
hexo -v
- 再初始化,执行命令 hexo init
hexo init
- 这时候在打开存放blog的文件夹,会看到一些文件,如下图
- 文件夹各种文件的作用
- node_modules:依赖包
- scaffolds:命令生成文章等的模板
- source:用命令创建的各种文章
- themes:主题
- _config.yml:整个博客的配置
- package.json:项目所需模块项目的配置信息
- 接下来修改blog文件夹中的文件,修改_config.yml文件的一些配置(记得冒号后必须有空格,不然配置不生效!!!切记!!!切记!!!)
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
- 然后在执行最后的三条命令
命令1生成部署文件
hexo deploy
命令2,然后部署
hexo generate
命令3,然后运行
hexo server
hf@hf-PC MINGW64 /d/git-blog
$ hexo deploy
INFO Start processing
INFO Files loaded in 347 ms
INFO Generated: index.html
INFO Generated: archives/index.html
INFO Generated: archives/2018/04/index.html
INFO Generated: fancybox/jquery.fancybox.css
INFO Generated: fancybox/fancybox_sprite.png
INFO Generated: fancybox/fancybox_loading@2x.gif
INFO Generated: fancybox/fancybox_loading.gif
INFO Generated: fancybox/blank.gif
INFO Generated: fancybox/fancybox_sprite@2x.png
INFO Generated: archives/2018/index.html
INFO Generated: fancybox/fancybox_overlay.png
INFO Generated: fancybox/jquery.fancybox.pack.js
INFO Generated: fancybox/jquery.fancybox.js
INFO Generated: css/fonts/FontAwesome.otf
INFO Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO Generated: js/script.js
INFO Generated: fancybox/helpers/jquery.fancybox-media.js
INFO Generated: css/style.css
INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO Generated: css/fonts/fontawesome-webfont.eot
INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO Generated: css/fonts/fontawesome-webfont.woff
INFO Generated: fancybox/helpers/fancybox_buttons.png
INFO Generated: css/images/banner.jpg
INFO Generated: css/fonts/fontawesome-webfont.ttf
INFO Generated: css/fonts/fontawesome-webfont.svg
INFO Generated: 2018/04/02/hello-world/index.html
INFO 28 files generated in 828 ms
hf@hf-PC MINGW64 /d/git-blog
$ hexo generate
INFO Start processing
INFO Files loaded in 234 ms
INFO 0 files generated in 261 ms
hf@hf-PC MINGW64 /d/git-blog
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
- 下面就是见证奇迹的时候到了,打开你的浏览器,输入http://localhost:4000
- 这就是github+hexo搭建博客