前些天使用wordpress程序搭建了个人网站,但感觉太重比较适合个人空间,所以这次介绍Hexo搭建免费博客,先提供官网给大家英文版的请点击这里,中文版的请点击这里,在安装一个Git,再是github上要有个账号,还要安装一个Node.js(下载点击链接)。
- npm install hexo-cli -g
hexo g #完整命令为hexo generate,用于生成静态文件
hexo s #完整命令为hexo server,用于启动服务器,主要用来本地预览
hexo d #完整命令为hexo deploy,用于将本地文件发布到github上
hexo n #完整命令为hexo new,用于新建一篇文章
在安装hexo前先完成以上步骤:在桌面右击鼠标选择Git Bash Here打开终端输入第一行命令npm install hexo-cli -g全局安装Hexo,如果之后在使用的过程中,遇到错误,就运行以下命令npm install hexo-deployer-git –save。
现在建个文件夹,名字随意,在刚才建的文件夹里打开git之后按照官网上的命令下载个初始包,
右击鼠标选择Git Bash Here打开终端输入hexo init,在输入安装依赖包npm install之后会有一大堆数据别管他就好,在hexo g打包静态html,最后hexo s本地运行,现在可以发现终端显示了http://localhost:4000,在任意浏览器下输入localhost:4000就可以看到博客了 。现在我们要上传到github上运行起来,首先我们登入到github建一个管理仓库,点击之后进入如下界面,这里需要注意一块就是仓库名必须是你的github名.github.io,例如我在github上的名字是rotate720deg,那么这个仓库名就是rotate720deg.github.io,建好之后要将本地文件部署到github,进入你刚建的Hexo博客文件夹,找到并打开_config.yml文件,在底部输入下面的代码:
- deploy: type: git repository: http://github.com/rotate720deg/rotate720deg.github.io.git branch: master
如图:
好了这里注意,hexo的配置中冒号(:)后都有一个空格,不能省略掉,配置好后,hexo g然后hexo d,如果这里我们出现ERRER问题,那就运行npm install hexo-deployer-git –save命令解决,如果没什么问题,我们访问https://rotate720deg.github.io,就已经能够看到我们的博客了,接下来重点来了hexo的配置文件,hexo有两个常用的配置文件:博客的配置文件E:\math\_config.yml和博客主题的配置文件E:\math\themes\landscape\_config.yml,什么意思呢?是这样的在我们刚安装的hexo文件夹,点击进去会看见_config.yml这个文件,这个文件是属于这个hexo的博客首页配置,还有一个在themes文件夹里,这个themes文件夹是专门放主题的,每个主题一个文件夹,每个文件夹里都有个和hexo博客首页一样的_config.yml文件,这个文件是专门配置主题的页面,就是博客首页之类的,这里是重点了,换主题之类的要改的文件是hexo框架的_config.yml文件,而要美化主题/博客首页之类的如:分享、评论、登录之类的微链接改的就是themes主题里的_config.yml文件了,到这里大概大家已经清楚了,
如何新建文章呢?也很简单在文件夹math里面右击鼠标选择Git Bash Here打开终端输入hexo new “这里是文章的名字” 回车后找到source\_posts下找到后缀为.md的文件,这个后缀的文件是属于markdown的文件格式,这里你可以用任何的编辑器打开编辑,也可以在线上使用markdown编辑器编辑,也可以下载markdown编辑器编辑,写完文章后,照之前的步骤上传:
- hexo g >>创建静态文档
- hexo s >>本地预览
- hexo d >>上传github
到这里就算是完美收工了。
这里再给个福利:可以对照看配置信息 =>
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: Hexo >>博客名 subtitle: >>副标题 description: >>描述 author: John Doe >>作者 language: zh-CN >>语言 timezone: >>时区,此处不填写,hexo会以你目前电脑的时区为默认值 # URL >>暂不配置,用于关联你自己的域名 ## If your site is put in a subdirectory, set url as ‘http://yoursite.com/child’ and root as ‘/child/’ url: http://yoursite.com root: / 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 auto_detect: false tab_replace: # Category & Tag >>暂不配置,使用默认值 default_category: uncategorized category_map: tag_map: # 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: 10 >>每页显示的文章数,0表示不分页 pagination_dir: page # Extensions >>插件配置,暂不配置 ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape # Deployment >>用于部署到github,已配置过 ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: http://github.com/rotate720deg/rotate720deg.github.io.git branch: master |
# Header >>博客的菜单栏 menu: Home: / Archives: /archives rss: /atom.xml # Content >>文章下的Read more,可以改为’阅读全文’ excerpt_link: Read More fancybox: true # Sidebar >>侧边栏配置 sidebar: right widgets: – category – tag – tagcloud – archive – recent_posts # display widgets at the bottom of index pages (pagination == 2) index_widgets: # – category # – tagcloud # – archive >>其他的一些配置 # widget behavior archive_type: ‘monthly’ show_count: false # Miscellaneous google_analytics: favicon: /favicon.png twitter: google_plus: fb_admins: fb_app_id: |