美文网首页
使用Hexo搭建个人博客并部署到GitHub上

使用Hexo搭建个人博客并部署到GitHub上

作者: iBleakNight | 来源:发表于2019-12-02 17:55 被阅读0次

    什么是Hexo?

    Hexo官方中文文档给出的解释是:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

    安装环境

    安装Hexo相当简单,安装下列应用程序即可:
    1.Node.js下载地址
    2.Git下载地址
    通过查看Node版本号来检查Node是否安装成功

    $ node -v
    
    查看Node是否安装成功

    通过查看Git版本号来检查Git是否安装成功

    $ git --version
    
    查看Git版本

    安装Hero

    安装环境搭建完成后,就可以使用npm安装Hero。

    $ npm install -g hexo-cli
    

    安装Hexo完成后,初始化一个项目,打开此项目并安装项目所需要的依赖包。

    $ hexo init <folder> #初始化项目,<folder>为自取项目名
    $ cd <folder> #打开项目
    $ npm install #安装依赖包
    

    安装完成后,指定文件夹的目录如下:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    
    初始化项目
    打开项目
    安装依赖包
    项目目录

    安装hexo-server

    $ npm install hexo-server --save
    

    本地启用服务查看项目的初始状态

    $ hexo server
    

    如遇到端口占用的情况,可以更改端口号

    $ hexo server -p 8888
    
    安装hexo-server
    本地启用服务
    更改端口号 效果图

    部署到GitHub Pages

    1.GitHub上新建一个仓库
    登入GitHub,在界面的右上方的用户信息点击加号,新建一个repository

    image.png
    给新建的仓库起名,注意:这个名字必须跟用户名保持一致,GitHub才会默认设置成用户的博客
    仓库起名
    新建项目完成
    项目完成
    项目需要设置的位置
    项目设置
    2.建本地搭建的Hero博客项目发布到GitHub
    生成静态文件
    $ hexo generate
    
    生成静态文件

    执行完以上命令,会在项目的根目录下生成public文件夹
    安装hexo-deployer-git插件

    $ npm install hexo-deployer-git --save
    
    安装hexo-deployer-git插件

    修改网站配置文件_config.yml,添加deploy信息:

    deploy:
      type: git
      repo: https://github.com/<username>/<project>
      # example:https://github.com/BleakNight95/BleakNight95.GitHub.io.git
      branch: master
    
    修改网站配置文件

    生成SSH key:

    $ cat ~/.ssh/id_rsa.pub
    

    在右上角的用户信息中,打开GitHub的设置页面


    设置

    进入SSH and GPD keys选项


    SSH and GPD keys选项
    新建SSH keys,复制生成的SSH key到此处
    新建SSH keys

    测试是否连接成功

    $ ssh -T git@github.com
    

    若出现下面的语句,则说明你的ssh key已经配置成功

    Hi BleakNight95! You've successfully authenticated, but GitHub does not provide shell access.
    
    ssh key已经配置成功

    生成静态文件上传

    $ hexo clean  //清除缓存文件db.json和已生成的静态文件public
    $ hexo g   //生成网站静态文件到默认设置的public文件夹
    $ hexo d   //部署网站到设定的仓库
    
    hexo clean
    hexo g
    hexo d

    Hero博客搭建完成
    https://bleaknight95.github.io/

    image.png

    [附录1]Hero中文文档
    [附录2]segmentfault大佬文章

    相关文章

      网友评论

          本文标题:使用Hexo搭建个人博客并部署到GitHub上

          本文链接:https://www.haomeiwen.com/subject/ykexgctx.html