zoukankan      html  css  js  c++  java
  • 使用 GitHub+Hexo 搭建个人博客

    阅读导览

    1. 安装Git和Hexo
    2. 使用Hexo进行本地建站
    3. 创建一篇文章
    4. 添加主题
    5. 配置github
    6. 将网站发布到Github
    7. 最后效果展示

    1.安装Git和Hexo

    安装Hexo前,需要安装Node.js和Git:

    安装好以上两个环境之后,打开打开Git-bash,输入

    npm install -g hexo-cli
    

    即可完成Hexo的安装。
    安装完成后可能提示:

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0
    (node_moduleshexo-cli ode_moduleschokidar ode_modulesfsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
    fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current:
    {"os":"win32","arch":"x64"})


    后面的安装也会出现类似提示,忽略即可,因为 fsevent是mac osx系统的,在win或者Linux下使用了 所以会有警告。

     

    2.使用Hexo进行本地建站

    选择一个本地的文件夹,如H:HexoBlog
    依次执行:

    hexo init H:/HexoBlog
    cd H:HexoBlog
    npm install
    

    如果hexo安装成功,则在C:hexo文件夹下的文件目录为

    .
    ├── _config.yml // 网站的配置信息,你可以在此配置大部分的参数。
    ├── package.json 
    ├── scaffolds // 模板文件夹。当你新建文章时,Hexo会根据scaffold来建立文件。
    ├── source // 存放用户资源的地方
    |   ├── _drafts
    |   └── _posts
    └── themes // 存放网站的主题。Hexo会根据主题来生成静态页面。
    

    详细文件或文件夹的具体含义见 Hexo官方文档
    之后输入

    hexo server
    

    此时会启动本地部署好的默认的博客网站,地址是:http://localhost:4000/,打开就可以查看了。

     

    3.创建一篇文章

    hexo new "文章名" #新建文章
    hexo new page "页面名" #新建页面   
    

    常用简写
    hexo n == hexo new
    hexo g == hexo generate
    hexo s == hexo server
    hexo d == hexo deploy
    详细命令请参考Hexo文档

    新建一篇文章后就可以预览了,在hexo new之后执行一次生成hexo g再执行hexo s启动本地服务器,此时刷新http://localhost:4000/页面就可以预览了。

     

    一种创建文章的简单方式

    我们还可以使用Hexo Admin插件,通过网页的方式发布新文章。
    它能够管理文章,添加分类和标签,也可以一键部署到pages
    有网友修改的版本实现了图片的粘贴上传,请参考hexo-admin-qiniu(根据hexo-admin@2.1.0进行修改,添加粘贴图片上传至七牛)

     

    4.添加主题

     

    4.1安装主题

    Hexo主题官网或者网上找一个自己喜欢的主题,获取它的git clone链接,如yilia主题,
    使用下面的命令安装主题:

    git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
    
     

    4.2启动主题

    找到目录下的_config.yml 文件,打开找到 theme:属性并设置为yilia,重新发布网站时就会采用新的主题了

     

    4.3更新主题

    cd themes/yilia
    git pull
    hexo g
    hexo s
    

    此时刷新http://localhost:4000/页面就能看到新的主题了.

     

    5.配置github

     

    5.1创建GitHub账号

    首先需要一个github账号,没有的话先注册一个,网址:https://github.com/

     

    5.2创建与账号同名的Repository

    然后创建一个与账号同名的Repository
    一定要同名的Repository,比如帐号是myid,那新建的Repository名称应该是myid.github.io

    当你的仓库名为:用户名.github.io 之后默认开启Github Pages,然后才可以通过用户名.github.io访问

     

    5.3配置SSH

    检查是否已经有SSH Key,打开Git Bash,输入

    cd ~/.ssh
    

    如果没有这个目录,则生成一个新的SSH,输入

    ssh-keygen -t rsa -C "your e-mail"
    

    其中,your e-mail是你注册Github时用到的邮箱。
    连续几个按回车,密码为空,然后在在~/.ssh/下,得到两个文件id_rsa和id_rsa.pub
    复制id_rsa.pub中的所有内容
    打开Github官网,登陆后进入到个人设置(点击头像->setting),点击右侧的SSH and GPG keys(或者直接打开网址https://github.com/settings/ssh),点击Add SSH key;填写title之后,将之前复制的内容粘贴到Key框中,最后点击Add key即可。

     

    5.4验证证是否能否连接到github

    输入

    ssh -T git@github.com
    

    如果提示

    The authenticity of host 'github.com (192.30.253.112)' can't be established. RSA key fingerprint is SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxx. Are you sure you want to continue connecting (yes/no)? y Please type 'yes' or 'no': yes
    

    或者提示覆盖原来的文件,选择yes回车,只要能看到如下提示:

    Hi username! You've successfully authenticated, but GitHub does not provide shell access.
    

    就说明SSH配置成功。

     

    5.5配置github账户

    git config --global user.name "username"
    git config --global user.email "email"
    

    配置完之后输入:

    git config --list
    

    查看已设配置,看username ,email是不是都对了。

     

    6.将网站发布到Github

     

    6.1修改Hexo配置文件

    打开H:HexoBlog文件夹中的_config.yml文件,找到如下位置,填写:

    # Deployment
    ## Docs: http://hexo.io/docs/deployment.html
    deploy: 
      type: git
      repo: git@github.com:MyGithub/MyGithub.github.io
    

    (1) 其中MyGithub替换成你的Github账户;
    (2)注意在yml文件中,:后面都是要带空格的。

     

    6.2安装Hexo deployer

    发布Hexo需要用到Hexo deployer,使用如下命令安装:

    npm install hexo-deployer-git --save
    
     

    6.3发布网站到github

    在git中进入网站根目录

    cd H:/HexoBlog
    hexo -g #编译本地内容
    hexo -d #发布到github
    

    完成后就可以通过MyGithub.github.io域名去访问自己的博客啦!

    7.最后效果展示

    演示地址:https://leftshine.github.io/

  • 相关阅读:
    利用正则表达式限制网页表单里的文本框输入内容小结
    实现注册页面中的倒计时功能代码
    asp.net中Response.Write用法小结
    数据库连接字符串
    asp.net中页面延时跳转代码
    C#网络编程socket使用总结
    CSS选择器总结
    C#面向对象三大特性总结
    HTML总结
    ASP.NET页面生命周期
  • 原文地址:https://www.cnblogs.com/leftshine/p/HexoOnGithub.html
Copyright © 2011-2022 走看看