热门搜索 :
考研考公
您的当前位置:首页正文

hexo搭建博客教程

来源:东饰资讯网
    mkdir blog
    cd blog
    npm install -g hexo
    hexo init xiaowen
    cd xiaowen
    hexo g
    hexo s

于是就有了这个...


下面呢一步一步来详细说明

需要的工具

工欲善其事,必先利其器,需要的一些工具和平台,如果已经有这些了,可以跳过这部分。

git(必须)

node.js

hexo 的安装

git 和 node 安装完成后,就需要安装主角了,那就是 hexo 。打开你的桌面,右键单击会出现 Git Base HereGit Gui Here,选择第一个 Git Base Here就可以了,就可以输入命令行了。如下图
这个窗口是可以设置和调整的,在窗口里面右键会出来设置的菜单,点击option即可。如果实在不会设置的,可以联系我!下面可以执行命令安装了

    npm install -g hexo    --->执行这个命令出错或者有其他的问题时,可能是被墙的原因,可以安装淘宝的npm镜像,执行如下命令安装
    npm install -g cnpm --registry=https://registry.npm.taobao.org    --->参考:https://npm.taobao.org/ ,执行完了这个命令后,就可以执行下面的命令了
    cnpm install -g hexo 

注: 上面的命令如果执行出错才需要执行2和3的命令,否则执行1命令即可。

简单的验证下

走完了上面的步骤,应该是没有多大问题了,记得验证下 git 和 node 的安装是否完好,可以执行下面的命令验证下版本

    git version   ---> 这个是验证git版本的
    node -v         ---> 这个是验证node版本的
    npm -v     ---> 这个是验证npm包管理器的
    hexo -v    ---> 这个是验证hexo 的

经过上面的步骤,工具都已经安装完成了,下面可以开始创建本地博客啦!

本地博客

经过上面的工具操作,现在可以执行命令来创建博客了,主要的命令大约有一下几条

    hexo init <folder>   --->folder : 带这个参数说明是在当前创建一个这样博客的文件夹
    hexo generate (hexo g  也可以) 
    hexo server  (hexo s 也可以)
    hexo clean  --->清理缓存
    hexo deploy  (hexo d 也可以)--->部署上去

看到这样的效果你已经成功了。

so...下面应该干点啥了呢?

我的第一反应是:换个好看点的主题或者背景,然后放上一两篇文章看看效果,满意后呢部署到github上去,让别人也可以访问看看,哈哈

换主题

建议你还是先跟我一样用这个主题吧,把流程走完熟悉了后你可以再设置你所需要的主题或者其他的。
回到根目录(是指你创建这个项目的目录),先把主题clone下来,执行如下命令:

    git clone  themes/next

clone 完成后,你会在目录themes下看到一个文件夹next,这时候说明已经clone下来了。然后就是这个启用主题了。打开根目录下的_config.yml文件(建议你用notepad ++ 打开或者 atom 编辑器 或者 Visual Studio Code 编辑器 或者 sublime text 编辑器),找到如下的信息:

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: landscape

theme: landscape改为theme: next,保存,然后执行命令:

    hexo g
    hexo s

看到如下效果说明主题切换成功了


这个主题有四种样式(这个文件在themes\next底下的_config.yml),分别如下:

    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

新建文章

看了新样式,很期待应该怎样写文章吧?
在目录source\_posts下有一个hello world.md的文件,这个就是你看到的博客第一篇文章。那么应该要怎样创建文章呢?执行如下命令:

    hexo new hexo博客     --->“hexo博客” 这个是你的文章名称

添加主页tags菜单

在刚刚的新建文章的命令中,其实是隐含了一个参数 layout,这个参数的默认值是post,所以你看到新建的文章是在目录_post里面的。
例子:添加一个标签的菜单按钮

在样式文件夹下的配置文件中设置

在文件themes\next\_config.yml中有如下信息:

    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
    # Usage: `Key: /link/ || icon`
    # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
    # Value before `||` delimeter is the target link.
    # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
    menu:
      home: / || home
      
      #tags: /tags/ || tags
      #categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
      #about: /about/ || user
    
    # Enable/Disable menu icons.
    menu_icons:
      enable: true

你有没有发现,点击浏览器上面的归档,网址后面有一个archives,其实就是在这里设置的。
现在要新加一个tags的菜单,那么就需要把上面的tags那行注释去掉。

命令行添加

注释了以后,执行命令:

    hexo new page tags   --->注意的是:这个命令是在根目录底下执行的

执行完了以后,进入source文件夹,你会发现多了一个tags的文件夹,再进入,打开index.md,在文件里面随便输入点东西,保存,执行hexo ghexo s,你就看到一个标签的菜单选项了,点击后,页面跳转显示的内容就是你刚刚输入的内容。
添加了菜单的item,怎样才使文章有标签呢?

在文章里面添加标签

需要在文章里面添加标签,在每篇文章的开头都会有如下的信息:

    title:
    date: 
    tags: 

只要我们在tags里面添加就行,比如tags: [andoid html]

在首页添加‘阅读全文’

主要有三种方式:

在文章中使用 `` 手动进行截断,Hexo 提供的方式。--->推荐方式
在文章的 front-matter 中添加 description,并提供文章摘录
自动形成摘要

    auto_excerpt:
    enable: true
    length: 150

添加头像信息

部署到github

建仓库

create_new_repositiory.png

设置仓库信息

github_setting_1.png github_setting_1.png github_setting_2.png

配置远程仓库信息

打开根目录的文件vim _config.yml,按照下面的信息进行配置

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo:     ---> 远程仓库地址
      branch: master    ---> 分支

部署到远程仓库

到了这一步,也就是执行命令的事情了

    npm install hexo-deployer-git --save      --->连接远程仓库,如果是第一次,会弹出窗口输入github 的帐号和邮箱
    或者 cnpm install hexo-deployer-git --save
    hexo deploy   --->这是部署的,执行完这个就可以看效果了

验证

每次部署的操作流程

    hexo clean
    hexo generate
    hexo deploy

本地操作预览的流程

hexo g
hexo s

文档参考

最后:下一篇教你打造更好看的博客和建立属于自己的专属域名。

Top