美文网首页
Hexo + GitHub Pages搭建个人技术博客

Hexo + GitHub Pages搭建个人技术博客

作者: miaozbetter | 来源:发表于2016-12-17 15:42 被阅读188次

    环境准备

    • 使用Hexo,需要在电脑中安装Nodejs和Git。

    • Node.js下载地址 点我

      安装界面如下,一路Next即可。

    • Git安装可以去百度,很多。

    • 最后检查是否安装成功,如下图

    安装Hexo

    • 提示:进行下面的步骤时,由于国内的网络问题,有时候可能会很慢。有时候也会出现一些莫名其妙的坑。所以这个时候你可能需要npm换源 这个 感谢此文作者,感谢淘宝~~ 。你也可以先进行下面的步骤,出现问题再来看这个

    • 下面的步骤强烈建议在 Git Bash中进行,如果用CMD命令行会有很多意想不到的坑。

    1. 可以在任意盘符下建立文件夹 如 F:/hexo

    2. 进入该目录下,右键打开Git Bash

    3. 执行命令 npm install hexo-cli -g 安装hexo

    4. 执行命令 hexo init 进行初始化操作

    5. 执行命令 npm install

    6. 执行命令 hexo g 生成静态文件,此命令会在当前目录下生成一个public文件夹。此文件夹的内容后面会上传到github来作为我们博客的内容。

    7. 执行命令 hexo s 用来启动服务。这时候去浏览器输入 http://localhost:4000 就可以看到本地页面啦~。如下图

    更换主题

    1. 你可能不太稀饭这个主题风格,可以下载其他风格~。你可以执行下面的命令下载另一个主题。

      $ hexo clean
      $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
      
      
    2. 要想使用此主题,还需要设置一下。修改Hexo目录下的 _config.yml 配置文件中的theme属性,将其设置为yilia。

      $ cd themes/yilia
      $ git pull
      $ hexo g # 生成页面
      $ hexo s # 启动本地服务
      
      

      现在打开 http://localhost:4000/ ,会看到我们已经应用了一个新的主题。

    什么是Github Pages

    1. 每个Github都可以有一个仓库来放置个人主页,仓库的名称必须是youname/youname.github.io。这是一个特殊的命名约定。创建好仓库你可以通过http://username.github.io来访问你的个人主页。需要注意的是,你的内容需要放在master分支下面。

    2. 注册GitHub及使用Github Pages的过程百度有很多,不再赘述。

    上传内容到Github Pages

    • 提示:上传之前需要安装一个扩展 npm install hexo-deployer-git --save
    1. 如果要把自己生成的网页内容上传到Github Pages,需要到前面我们生成的hexo文件夹下,找到配置文件 _config.xml 。做如下的修改

      deploy:
      type: git
      repo: git@github.com:xxxxx/xxxx.github.io.git
      branch: master
      
    2. 然后执行 hexo d 即为将内容部署到github上。期间你可以选择通过SSH的方式,也可以通过HTTPS的方式。区别就是输不输账号密码了,个人喜欢通过https的方式上传。(通过SSH KEY的方式需要去git bash和github配置,不会就百度吧,很多文章~)

    3. 部署成功后,可能会存在延迟,访问 https://xxxxx.github.io/ 就可以看到内容啦。

    你还需要的东西

    • 通过上面的步骤,我们成功的将本地的静态页面上传到github并且能成功的访问了。兴奋ing~~ 但是我们只是学会了如何上传,而且只有一个hello文章。一个博客最重要的当然还是内容了。下面介绍如何给博客添加内容。
    1. 以下是上面用过的一些命令的解释

      1. hexo generate (hexo g) 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
      2. hexo server (hexo s) 启动本地web服务,用于博客的预览
      3. hexo deploy (hexo d) 部署播客到远端(比如github, heroku等平台)
    2. 下面是新建文章的相关命令

      $ hexo new "postName" #新建文章
      $ hexo new page "pageName" #新建页面
      
      $ hexo n == hexo new
      $ hexo g == hexo generate
      $ hexo s == hexo server
      $ hexo d == hexo deploy
      
      $ hexo d -g #生成部署
      $ hexo s -g #生成预览
      
      
    3. 新建的文章你可以在source文件夹下找到,然后~ 开始写作吧markdown语法可以参照 http://wowubuntu.com/markdown/

    4. 预览文章时,觉得长度过长。可以在你需要截断的地方加上 ****

    5. 最后,最好的文档还是官方的⊙0⊙ https://hexo.io/zh-cn/docs/

    • QQ 527369301

    相关文章

      网友评论

          本文标题:Hexo + GitHub Pages搭建个人技术博客

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