美文网首页也许会有用寒哥管理的技术专题寻法致用
Windows下一步步搭建自己的独立博客——使用 GitHub

Windows下一步步搭建自己的独立博客——使用 GitHub

作者: Coder_Y | 来源:发表于2015-03-23 20:06 被阅读877次

    -此教程不仅面向计算机专业的同学,任何想搭建个人独立博客的同学,都可以来看看-
    --By Y.R.H


    前言

    接上文,经过Windows下一步步搭建自己的独立博客——使用 GitHub Pages + Hexo 基础教程(二)的学习,相信大家都已经将自己的个人域名和 GitHub Pages 搭建好的个人博客绑定起来了,但是,我们还是没有发表一篇博文,连个人博客的设置都还是默认值,这可不是我们想要的,所以,教程(三)将向大家介绍一下 Hexo 中的 _config.yml 配置文件,以及如何发表博文。


    配置文件 _config.yml

    个人博客配置一共用到两个文件,一个是对整站的配置 Hexo(hexo 根目录下)\ _config.yml,另一个是对主题的配置 Hexo\themes\xxx(主题名)\ _config.yml,我们来分别介绍。

    整站配置文件 Hexo \ _config.yml

    该配置文件位于我们使用 hexo init 命令时的目录下,如图:

    用文本编辑器打开后如图(作者使用的是 Sublime Text 3):

    接下来就来详细的说一下这些都是做什么用的(可能与大家的有些许出入,不存在的项就为默认值):

    # Hexo Configuration
    ## Docs: http://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site 基本配置
    title: Coooooooooder_Y # 个人博客标题(反映在网站左上角)
    subtitle: 杨睿涵 个人博客 # 个人博客副标题
    description: This is a Personal Blog for Y.R.H # 个人博客的描述
    author: Yang R.H. # 个人博客作者
    language: zh-CN # 个人博客使用语言(默认为 English ,简体用 zh-CN ,繁体用 zh-TW)
    email: coderyrh9236@gmail.com # 个人博客作者的联系邮箱
    
    # # URL #这项可以不配置,绑定域名后,欲创建sitemap.xml需要配置该项
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://www.yangruihan.com  # 绑定的域名
    root: / # 是否为根目录显示该博客,如过,你想使用 www.xxx.com/blog 来显示博客 这项需要改成 /blog
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    
    # Directory 目录
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:
    
    # Writing 文章布局、风格,无需修改
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      tab_replace:
    
    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:
    
    # Archives 默认值为2,这里都修改为1,相应界面就只会列出标题,而非全文
    ## 2: Enable pagination
    ## 1: Disable pagination
    ## 0: Fully Disable
    archives: 1
    category: 1
    tag: 1
    
    # 日期格式无需修改
    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss
    
    # Pagination # 每页显示的文章数量
    ## Set per_page to 0 to disable pagination
    per_page: 15
    pagination_dir: page
    
    # Disqus # 社会化评论 默认为disqus,我这里换成了“多说”
    # disqus_shortname: yangruihan
    # 多说社会化评论
    duoshuo_shortname: yangruihan
    
    # Extensions # 个人博客使用的主题,可以自行更换
    ## Plugins: http://hexo.io/plugins/
    ## Themes: http://hexo.io/themes/
    theme: jacman
    
    
    # Deployment # 个人博客部署到 GitHub
    ## Docs: http://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/yangruihan/yangruihan.github.io.git
      branch: master
      message: 
    
    # Extensions # 使用的插件
    Plugins:
    - hexo-generator-feed
    - hexo-generator-sitemap
    
    # 插件配置
    
    #Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20
    
    #sitemap
    sitemap:
      path: sitemap.xml
    

    大家可以根据自己的需要进行相应的更改。

    提示:如果还有什么不太明白,可以看 Hexo 官网 的说明

    主题配置文件 Hexo\themes\xxx\_config.yml

    小提示:由于主题的不同,配置文件也或多或少有些区别,不过英文好的同学肯定能看懂每项的意思,大家可以试着改一改,然后在本地跑起来,可以直接看到效果。

    该配置文件位于我们的 Hexo\themes\xxx\ 的目录下,如图:


    用文本编辑器打开后如图:


    这里只介绍通用的一些选项:

    ##### Menu # 个人博客右上角显示的导航栏,默认为英文(Home: /)可以手动改成中文
    menu:
      首页: /
      文章列表: /archives
      关于: /about
    ## you can create `tags` and `categories` folders in `../source`.
    ## And create a `index.md` file in each of them.
    ## set `front-matter`as
    ## layout: tags (or categories)
    ## title: tags (or categories)
    ## ---
    
    #### Widgets # 个人博客右边栏
    widgets: 
    - category
    - tag
    - links
    - douban
    - rss
    ## provide seven widgets:category,tag,rss,archive,tagcloud,links,weibo,douban
    
    
    #### RSS 
    rss: /atom.xml # rss 源添加
    
    #### Image # 网站用到的图片资源索引
    imglogo:
      enable: false             ## display image logo true/false.
      src: img/logo.png        ## `.svg` and `.png` are recommended,please put image into the theme folder `/jacman/source/img`.
    favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/jacman/source/img`.     
    apple_icon: img/jacman.jpg ## size:114px*114px,please put image into the theme folder `/jacman/source/img`.
    author_img: img/author.jpg ## size:220px*220px.display author avatar picture.if don't want to display,please don't set this.
    banner_img: img/banner.jpg ## size:1920px*200px+. Banner Picture
    ### Theme Color 
    theme_color:
        theme: '#4682b4'    ##the defaut theme color is blue
    
    #### index post is expanding or not 
    index: # 文章索引
      expand: false  # 文章在首页是否展开   ## default is unexpanding,so you can only see the short description of each post.
      excerpt_link: 阅读全文 #   
    
    close_aside: false  #close sidebar in post page if true
    
    #### Author information
    author: # 作者的信息
      intro_line1:  "Hello ,I'm Yangruihan."  # 介绍作者的话  ## your introduction on the bottom of the page
      intro_line2:  "This is my blog, keep studying everyday." # 同上  ## the 2nd line
      weibo:  3767425381  #微博号  ## e.g. wuchong1014 or 2176287895 for http://weibo.com/2176287895
      weibo_verifier: # 微博show ## e.g. b3593ceb Your weibo-show widget verifier ,if you use weibo-show it is needed.
      tsina:  3767425381  # 微博分享 ## e.g. 2176287895  Your weibo ID,It will be used in share button.
      douban: # 豆瓣     ## e.g. wuchong1014 or your id for https://www.douban.com/people/wuchong1014
      zhihu: yang-rui-han-68 # 知乎     ## e.g. jark  for http://www.zhihu.com/people/jark
      email: coderyrh9236@gmail.com # 邮箱    ## e.g. imjark@gmail.com
      twitter:  # twitter  ## e.g. jarkwu for https://twitter.com/jarkwu
      github: yangruihan  # github 主页 ## e.g. wuchong for https://github.com/wuchong
      facebook:   ## e.g. imjark for https://facebook.com/imjark
      linkedin:   ## e.g. wuchong1014 for https://www.linkedin.com/in/wuchong1014
      google_plus:    ## e.g. "111190881341800841449" for https://plus.google.com/u/0/111190881341800841449, the "" is needed!
      stackoverflow:  ## e.g. 3222790 for http://stackoverflow.com/users/3222790/jark
    ## if you set them, the corresponding  share button will show on the footer
    #### Links 个人博客底边栏的链接
    links:
      我的GitHub: https://github.com/yangruihan,杨睿涵的个人GitHub
      我的微博: http://weibo.com/3767425381,杨睿涵的个人新浪微博
      我的知乎: http://www.zhihu.com/people/yang-rui-han-68,杨睿涵的个人知乎
    

    配置文件就介绍到这里。


    发表博文

    废了这么半天功夫搭建了一个个人博客,最重要的当然是写博客啦。

    新建博文

    新建博文有两种方法

    方法一:使用命令新建一篇博文

    使用 Git Shell 进入 Hexo 文件夹,输入一下命令:

    $ hexo new "文章题目"
    

    当出现如下图提示时,表示新博文已经创建完毕:

    这时会发现在 Hexo\source\_posts 目录中多了一个文件,如图:

    用文本编辑器打开后,如下图:

    这里系统不会创建博文分类,如果想加上文章的类型,可以在 “___” 上面自己加上一个标签:

    categories: xxx  # 文章文类
    

    到此一篇新博文就创建成功了。

    方法二:直接在文件夹中创建

    直接进入目录 Hexo\source\_posts 目录中,右键新建一个文本文档,将名字改为 博文名.md ,用文本编辑器打开自行加上所需标签即可:

    title: "测试博文"
    date: 2015-03-23 19:33:59
    tags:
    ---
    

    写博文

    博文内容写在 "___" 后面,如图:

    因为 Hexo 是支持 markdown 语法的,所以我们也要使用 markdown 来书写博文,千万不要觉得 markdown 像是 C、C++、Java 这样的编程语言,又难学,又难理解,markdown 的语法很简单,但是功能十分强大,排版什么的分分钟搞定,一旦你学会使用,只剩下一句话,根本停不下来!

    由于篇幅原因这里就不详细介绍 markdown 语法了,请移步以下网站,也可以自行搜索一下 markdown 语法:
    献给写作者的 Markdown 新手指南
    markdown专题

    发博文

    博文写完后,还是在 Git Shell 中进入 Hexo 文件夹中使用那几条命令,将网页自动生成并部署到 GitHub上:

    $ hexo clean
    $ hexo generate
    (若要本地预览就先执行 hexo server)
    $ hexo deploy
    

    刷新个人博客网页,就可以看到新鲜出炉的博文了,赶紧邀请小伙伴们来欣赏吧。


    补充

    快捷命令方式

    hexo g == hexo generate
    hexo d == hexo deploy
    hexo s == hexo server
    hexo n == hexo new
    # 还能组合使用,如:
    hexo d -g
    

    如何在博文中插图

    首先,注册一个图床账号
    本人使用的是七牛云存储(如果有什么更好的推荐,请留言),体验用户免费1G空间,认证免费用户10G空间,已经足够日常使用了,并且很稳定。
    将自己需要插入博文的图片上传到云空间,如图:

    在博文中输入 ![](填写刚才复制的地址) ,就把图片成功插入了

    推荐使用 简书 markdown 预览编辑模式,可以实时看到自己写到效果

    如图:

    使用步骤:

    P.S:如果发现文章中有明显的错误和问题请在下面留言或者联系本人,本人将及时改正,避免给大家带来不必要的误导,谢谢~

    相关文章

      网友评论

        本文标题:Windows下一步步搭建自己的独立博客——使用 GitHub

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