zoukankan      html  css  js  c++  java
  • 史上最详细“截图”搭建Hexo博客并部署到Github

    http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html

    大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hexo博客并部署到Github,走了不少弯路。现在终于搭建出来了,为了帮助大家,我决定写一篇“史上最详细“截图”搭建Hexo博客并部署到Github”。

    史上最详细“截图”搭建Hexo博客并部署到Github

    工具/原料

     
    • Windows(Mac也是差不多,可参照)
    • Git
    • Node.js

    安装Hexo

     
    1. 1

      利用 npm 命令即可安装。在任意位置点击鼠标右键,选择Git Base。

      史上最详细“截图”搭建Hexo博客并部署到Github
    2. 2

      输入命令:

      npm install -g hexo

      注意:-g是指全局安装hexo。

      END

    创建Hexo文件夹

     
    • 安装完成后,在你喜爱的文件夹下(如C:Hexo),执行以下指令(在C:Hexo内点击鼠标右键,选择Git Bash),Hexo 即会自动在目标文件夹建立网站所需要的所有文件。

      hexo init

      END

    安装依赖包

     
    • npm install

      END

    本地查看

     
    • 现在我们已经搭建起本地的hexo博客了,执行以下命令(在C:Hexo),然后到浏览器输入localhost:4000看看。

      hexo generate

      hexo server

      史上最详细“截图”搭建Hexo博客并部署到Github
      END

    注册Github账号

     
    • 这里不演示了。

      END

    创建Repository

     
    • 创建的时候注意Repository的名字。比如我的Github账号是angelen10,那么我应该创建的Repository的名字是:angelen10.github.io。

      史上最详细“截图”搭建Hexo博客并部署到Github
      END

    修改配置文件

     
    1. 1

      到你刚刚创建的Repository下,找到以下内容:

      史上最详细“截图”搭建Hexo博客并部署到Github
    2. 2

      先点击HTTPS,然后复制里面的地址。然后编辑_config.yml文件(在C:Hexo下)。

      史上最详细“截图”搭建Hexo博客并部署到Github
    3. 3

      修改文件里面的deploy。其中的repository就改成你刚刚复制的地址。保存这个文件。

      史上最详细“截图”搭建Hexo博客并部署到Github
      END

    设置SSH keys

     
    1. 1

      在Git Bash输入以下指令(任意位置点击鼠标右键),检查是否已经存在了SSH keys。

      ls -al ~/.ssh

    2. 2

      如果不存在就没有关系,如果存在的话,直接删除.ssh文件夹里面所有文件:

      史上最详细“截图”搭建Hexo博客并部署到Github
    3. 3

      输入以下指令(邮箱就是你注册Github时候的邮箱)后,回车:

      ssh-keygen -t rsa -C "angelen10@163.com"

      史上最详细“截图”搭建Hexo博客并部署到Github
    4. 4

      然后它会提示要你输入passphrase(如上图,我没有输入直接回车,如果你输入的话,要记得,到时候会用到)。之后,如果出现类似下图:

      史上最详细“截图”搭建Hexo博客并部署到Github
    5. 5

      然后键入以下指令:

      ssh-agent -s

      史上最详细“截图”搭建Hexo博客并部署到Github
    6. 6

      继续输入指令:

      ssh-add ~/.ssh/id_rsa

    7. 7

      输入之后,在我这里是出错了,不知道你的有没有出错。

      史上最详细“截图”搭建Hexo博客并部署到Github
    8. 8

      如果你的也是这样子出错了的话,就输入以下指令:

      eval `ssh-agent -s`

      ssh-add

      史上最详细“截图”搭建Hexo博客并部署到Github
    9. 9

      到了这一步,就可以添加SSH key到你的Github账户了。键入以下指令,拷贝Key(先拷贝了,等一下可以直接粘贴):

      clip < ~/.ssh/id_rsa.pub

    10. 10

      然后到Github里面,点击右上角的设置图标:

      史上最详细“截图”搭建Hexo博客并部署到Github
    11. 11

      在Settings sidebar那里,点击SSH keys:

      史上最详细“截图”搭建Hexo博客并部署到Github
    12. 12

      点击Add SSH key:

      史上最详细“截图”搭建Hexo博客并部署到Github
    13. 13

      输入Title,作为这个key的描述吧(你可以输入Personal MacBook Air,瞬间高大上)

      史上最详细“截图”搭建Hexo博客并部署到Github
    14. 14

      然后这个Key就是刚刚拷贝的,你直接粘贴就好(也可以文本打开以下文件):

      史上最详细“截图”搭建Hexo博客并部署到Github
    15. 15

      点击Add Key:

      史上最详细“截图”搭建Hexo博客并部署到Github
    16. 16

      输入你的Github密码即可完成SSH Key的添加。嗯,最后还是测试一下吧,键入以下命令:

      ssh -T git@github.com

      史上最详细“截图”搭建Hexo博客并部署到Github
    17. 17

      你可能会看到有警告,没事,输入“yes”就好。

      END

    完成部署

     
    1. 1

      最后一步,快要成功了,键入指令:

      hexo generate

      hexo deploy

    2. 2

      OK,我们的博客就已经完全搭建起来了,在浏览器输入(当然,是你的用户名):

      http://angelen10.github.io/

      史上最详细“截图”搭建Hexo博客并部署到Github
    3. 3

      注意:每次修改本地文件后,需要键入hexo generate才能保存。每次使用命令时,都要在C:Hexo目录下。每次想要上传文件到Github时,就应该先键入hexo generate保存之后,再键入hexo deploy。大概成功之后是酱紫的:

      史上最详细“截图”搭建Hexo博客并部署到Github
    4. 4

      对了,记住上图的Username是你的Github账号名称,而不是邮箱;Password就是你的Github的密码。

      END

    Tips

     
    • hexo现在支持更加简单的命令格式了,比如:

      hexo g == hexo generate

      hexo d == hexo deploy

      hexo s == hexo server

      hexo n == hexo new

      END

    注意事项

     
    • 这篇和官方的说法有一点不一样,不过这是成功之谈。
    经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
    举报作者声明:本篇经验系本人依照真实经历原创,未经许可,谢绝转载。
  • 相关阅读:
    Struts2+Hibernate+Spring框架整合实战
    springboot集成log4j2,Spring集成log4j2解决方案整理总结
    在linux上使用less命令查看文件的时候,服务器会提示如下:"catalina.out" may be a binary file. See it anyway?
    Eslint 入门详解教程
    mysql表、视图、索引、函数、触发器相关示例(三)
    Nginx(三) 因user www未设置引发的权限问题
    Nginx(二) nginx.conf配置文件详解
    Nginx(一) Linux详细安装及部署实战
    关于Java中集成mysql(springboot)处理数据创建时间和最后更新时间的总结
    Serializable接口的意义和用法总结
  • 原文地址:https://www.cnblogs.com/webenh/p/5792631.html
Copyright © 2011-2022 走看看