美文网首页程序员
搭建hexo博客——部署到GitHub及coding全教程

搭建hexo博客——部署到GitHub及coding全教程

作者: 天尘大叔 | 来源:发表于2018-02-04 09:18 被阅读0次

    环境准备

    安装git;官网
    安装node.js;官网

    注册GitHub

    • 注册一个『GitHub』帐号,已有的请忽略
    • 建立与你用户名对应的仓库,仓库名必须为『your_user_name.github.io』

    注册Coding

    • 注册一个『Coding』帐号,已有的请忽略
    • 建立与你用户名对应的仓库

    转到page服务,从部署来源部署master分支

    添加ssh到GitHub、Coding

    设置用户名和密码

    (使用git工具,不是命令行工具,在空白处点击鼠标右键,点击Git Bash Here)首先设置你的用户名密码:

    git config --global user.email "tianchener@gmail.com"
    git config --global user.name "tianchener"
    

    生成密钥

    ssh-keygen -t rsa -C "tianchener@gmail.com"
    

    过程中

    Generating public/private rsa key pair.  #生成公共/私有密钥对
    Enter file in which to save the key (/c/Users/jiang/.ssh/id_rsa):  #输入保存密钥文件(直接回车)
    Created directory '/c/Users/jiang/.ssh'.
    Enter passphrase (empty for no passphrase):  #输入密码(密码不显示)
    Enter same passphrase again:  #再次输入相同密码
    ……
    

    添加SSH Key到GitHub

    在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。

    1、打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。

    Mac用户请在下面查找:

    Find前往文件夹~/.ssh/id_rsa.pub打开id_rsa.pub文件,里面的信息即为SSH key,将这些信息复制到Github的Add SSH key页面即可。

    2、登陆Github。点击右上角的用户头像, Settings--->SSH and GPG keys ---> New SSH key

    3、把你本地生成的密钥复制到里面(key文本框中), 点击 Add SSH key 就ok了

    打开:

    添加:

    验证一下:

    ssh -T git@github.com
    

    验证期间需要输入yes及ssh密码

    添加SSH Key到Coding

    conding有别于GitHub,需要在账户添加ssh key,而不是仓库。

    验证一下:

    ssh -T git@git.coding.net
    

    验证结果同上一步。

    安装hexo

    执行如下命令:

    npm install hexo-cli -g
    

    Mac请执行下列命令

    $ sudo npm install -g hexo
    

    初始化

    在自己认为合适的地方创建一个文件夹(自定义文件夹名),然后在文件夹内的空白处按住Shift+鼠标右键,然后点击在此处打开命令行窗口。(同样要记住啦,下文中会使用在当前目录打开命令行来代指上述的操作)

    然后,执行init命令初始化hexo到你指定的目录:

    hexo init
    

    也可以cd到目标目录,执行hexo init。

    生成静态页面

    cd 到你的init目录,执行如下命令,生成静态页面至hexo\public\目录。

    hexo generate
    

    命令必须在init目录下执行,否则不成功,但是也不报错。

    当你修改文章Tag或内容,不能正确重新生成内容,可以删除hexo\db.json后重试,还不行就到public目录删除对应的文件,重新生成。

    在此过程中如出现

    $ hexo generate
    ERROR Local hexo not found in E:\Dropbox\Hexo
    ERROR Try running: 'npm install hexo --save'
    

    请执行

    npm install hexo --save
    

    再次生成静态页面

    hexo generate
    

    本地启动

    执行如下命令,启动本地服务,进行文章预览调试。

    hexo server
    

    浏览器输入http://localhost:4000就可以看到效果。

    如打开失败,请运行下列代码,换个端口

    hexo s -p 3600
    

    http://localhost:3600

    写文章

    执行new命令,生成指定名称的文章至hexo\source_posts\postName.md。

    hexo new 新建文章
    

    文章摘要

    在需要显示摘要的地方添加如下代码即可:

    以上是摘要
    <!-- more -->
    以下是余下全文
    

    自定义页面

    执行new page命令

    hexo new page "about"
    

    在hexo\source\下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的_config.yml中将其配置显示出来。

    上述步骤,也可以手工生成,在hexo\source\下手工新建about和index.md也是完全等价的。

    部署到git

    修改_config.yml文件

    deploy:
    type: git
    repo:
        github: git@github.com:tianchener/tianchener.github.com.git,master  #你的GitHub Pages仓库
        coding: git@git.coding.net:tianchener/tianchener.git,master  #你的coding仓库
    

    执行

    hexo deploy
    

    在执行 hexo deploy 后,若出现 error deployer not found:git 的错误,执行:

    npm install hexo-deployer-git --save
    

    再次执行

    hexo g
    hexo d
    

    主题安装

    安装主题的方法就是一句git命令:

    git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist    # modernist为主题名称
    

    目录是否是modernist无所谓,只要与_config.yml文件一致即可。

    安装完成后,打开hexo_config.yml,修改主题theme: modernist

    域名绑定

    域名配置文件

    在source目录下创建一个CNAME文件,不带后缀。创建后写入你的域名.里面的内容为域名不要http以及www等前缀,只需写入域名本身,例如

    tianchener.com
    

    随后执行,这个是和coding关联的

    cd source/
    touch Staticfile  #名字必须是Staticfile
    

    解析

    域名服务商修改dns

    向你的 DNS 配置中添加 4 条记录

    主机记录  记录类型  记录值
    www      CNAME    username.github.io  #线路类型:国外
    @        CNAME    username.github.io  #线路类型:国外
    @        CNAME    pages.coding.me      #线路类型:国内
    www      CNAME    pages.coding.me      #线路类型:国内
    

    修改域名

    • 打开Coding的page服务,绑定自定义域名。
    • 打开hexo_config.yml,修改域名设置。

    相关文章

      网友评论

        本文标题:搭建hexo博客——部署到GitHub及coding全教程

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