所需工具

    Git 官网
    Hexo  官网
    Node.js 官网
    Github 官网
    域名(可选)


JimtDs.png

一、安装

  1. 在自己想要的目录新建一文件夹,文件夹自定义 我这里是在D:\Hexo在Hexo文件夹下右键,选择Git Bash Here
    JFTLlQ.png
    JFTqSg.png

  2. 使用命令安装Hexo

    1
    $ npm install hexo-cli -g

    JFHPEt.png

  3. 安装完成后,输入 hexo -v 输出版本信息

    1
    $ hexo -v

    JFTvmn.png

  4. 输入hexo init初始化(耐心等待…) 初始化后文件目录下会多出如下图文件和文件夹

    1
    $ hexo init

    JFTXOs.png
    JFTOyj.png

  5. 输入命令 hexo generate可以缩写hexo g 生成HTML页面

    1
    $ hexo generate

    JFTxwq.png




会多出public文件夹如下图,public文件夹内是hexo生成的html文件还有css、js、json
JFTzT0.png

  1. 使用命令 hexo server 可缩写hexo s启动服务

    1
    $ hexo server

    JF7pkV.png

  2. 在浏览器里输入http://localhost:4000这是默认主题,后面可以在网上下载别人做好的主题进行修改(主题修改不在本章的知识范围)

可以使用Ctrl+C中断本地服务
JF7ipF.png


如果你不喜欢这个端口可使用命令hexo server -p 1314指定端口,访问http://localhost:1314

1
$ hexo server -p 1314

二、部署项目到Github远程仓库

  1. 登录 Github 新建一个仓库,仓库名必须为你的 Github用户名.github.io
    例如:
    我的用户名是:lete114
    那么格式因该为:lete114.github.io

  2. 打开的Hexo项目文件夹下的_config.yml文件,拉到最底部找到deploy:填写如下内容(注意:冒号后面有个空格)

    1
    2
    3
    type: git
    repo: https://github.com/你的用户名/你的用户名.github.io.git
    branch: master
  3. 回到Gitbash中,进入你的Hexo目录,分别执行以下命令

    1
    2
    3
    4
    $ npm install hexo-deployer-git --save  #安装部署工具
    $ hexo clean #清除缓存 可缩写hexo c
    $ hexo generate #生成静态文件 可缩写hexo g
    $ hexo deploy #部署到Github 可缩写hexo d
  4. 在浏览器中输入http://你的Github用户名.github.io 就可以看到你的个人博客

  5. 部署到GitHub远程仓库

    1
    hexo d

三、绑定域名

  1. 到自己购买域名的供应商网站的控制台里配置域名,我这里使用的是阿里云的,点击自己想要绑定的域名
    J1yIRx.png
  1. 然后点击添加记录
    J1y5J1.png

  2. 这里不多说,图片上都写着了,值得注意的是记录值必须是你Github的用户名.github.io
    J1yoz6.png
    J1y4iR.png

  1. 登陆Github官网打开自己的Pages仓库,点击右上角的settings进入仓库设置
    J1yWdJ.png
  2. 往下滑找到Github Pages 在Custom domain 输入刚刚阿里云的域名

(说明一下我域名是中文域名所以我拿去转码了一下就变成这样了,以防万一,我怕Github识别不了才转码的,如果大家的是英文字母的话就不用转码了)
J1yRZ4.png
J1yfo9.png

  1. 完了之后在地址栏输入即可打开你的个人博客了
    J1y7QK.png



本章内容到此就结束了
下章内容下载主题,并做相关的配置和优化
如果觉得不错的话,就分享给你的好朋友

文章作者: Lete乐特
文章链接: https://blog.lete114.top/article/20862.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特's Blog
  • alipay
  • wechat

评论