创建GitHub仓库
注册/登陆
创建仓库
仓库名称必须为:用户名.github.io
安装Git
安装Git客户端
安装Nodejs
安装Hexo
在命令行中输入:
1 npm install hexo-cli -g
创建本地博客
- 打开命令,定位到放置博客的文件夹下
- 输入命令:
1 hexo init 你的用户名.github.io // 建议和创建仓库时使用同一个
主题安装
Next/yilia
切换到上面生成的博客本地目录(xxx.github.io)
执行命令:
12 git clone https://github.com/iissnan/hexo-theme-next themes/nextgit clone git@github.com:litten/hexo-theme-yilia.git themes/yilia
想要使用哪种主题,就下载哪一种主题
使用主题
切换到上面生成的博客本地目录(xxx.github.io)
修改_config.yml文件
1 theme: next //刚刚安装的主题名称注意:该配置文件中的键值之间一定要有空格,否则轻则没有作用,重则报错,无法启动。
配置文件基本项修改
请参考Hexo官方文档
我自己的配置为:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 # Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Sitetitle: mengyanxinsubtitle: 有情者伤人,无情者自伤description: 一人吃饱,全家不饿的小码农!author: mengyanxinlanguage: zh-Hansemail: 13260695212@163.comkeywords: "java,liunx,html,js"timezone:# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://yoursite.comroot: /permalink: :year/:month/:day/:title/permalink_defaults:# Directorysource_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:# Writingnew_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight:enable: trueline_number: trueauto_detect: truetab_replace:# Category & Tagdefault_category: uncategorizedcategory_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-DDtime_format: HH:mm:ss# Pagination## Set per_page to 0 to disable paginationper_page: 20pagination_dir: page# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: yilia#theme: next#theme: landscape# 头像# 注意:是 xxx.github.io/source 下的开始的相对路径,如果 source 文件夹下面没有 uploads 文件夹,那么新建一个。考虑到会博客中用很多图片,在 uploads 文件夹下请分好类,避免混乱avatar: uploads/user/images/mengyan.jpg# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:type: gitrepo: http://github.com/mengyanxin/mengyanxin.github.io.gitjsonContent:meta: falsepages: falseposts:title: truedate: truepath: truetext: trueraw: falsecontent: falseslug: falseupdated: falsecomments: falselink: falsepermalink: falseexcerpt: falsecategories: falsetags: true
运行本地服务
切换到博客本地目录(xxx.github.io)
输入命令:
1 hexo s -p 5000 //可以直接使用hexo s打开服务
如果PC已经安装福昕阅读器,会占用hexo的默认端口4000,使用-p 打开另一端口,供hexo使用
插件配置
切换的博客本地目录(xxx.github.io/themes/yilia)
修改_config.yml文件
下面是我的博客的配置
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 # Headermenu:主页: /夢魇: /tags/mengyan相册: /photos# SubNavsubnav:github: "https://github.com/mengyanxin"#weibo: "http://weibo.com/litten225"#rss: /atom.xml#zhihu: "#"#douban: "#"#segmentfault: "#"#mail: "mailto:litten225@qq.com"#facebook: "#"#google: "#"#twitter: "#"#linkedin: "#"#rss: /atom.xml# 是否需要修改 root 路径# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。root:# Contentexcerpt_link: 'more'show_all_link: '展开全文'fancybox: truemathjax: false# 打赏reward_type: 2reward_wording: '谢谢你请我吃糖果'alipay: /assets/img/alipay.jpgweixin: /assets/img/weixin.jpg# 是否在新窗口打开链接open_in_new: true# Miscellaneousbaidu_analytics: 'a30844fa2bcbce0a9e001fe06cefeddf'google_analytics: falsefavicon: /assets/img/favicon.ico#你的头像urlavatar: /uploads/user/images/mengyan.jpg#是否开启分享share_jia: truemobile:social: true#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论#duoshuo: "litten-hexo"# 样式定制 - 一般不需要修改,除非有很强的定制欲望…style:# 头像上面的背景颜色header: '#4d4d4d'# 右滑板块背景slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'# slider的设置slider:# 是否默认展开tags板块showTags: false# 如不需要,将该项置为false# 比如#smart_menu:# friends: falsesmart_menu:innerArchive: '所有文章'friends: '友链'aboutme: '关于我'friends:alanli7991's Blog: http://alanli7991.github.iolitten: http://litten.me友情链接3: http://localhost:4000/友情链接4: http://localhost:4000/友情链接5: http://localhost:4000/友情链接6: http://localhost:4000/aboutme: 萌萌哒小菜鸡。。。
hexo常用命令
创建分类和标签页面
12 hexo new page categories //新建分类hexo new page tags //新建标签编辑新建页面文件夹下面的index.md
123456 title: All tagsdate: 2017-03-23 14:12:52type: "categories"comments: false
123456 title: All tagsdate: 2017-03-23 14:12:52type: "tags"comments: false
安装自动部署工具
切换到本地博客目录
运行命令:
1 npm install hexo-deployer-git --save
部署到GitHubPages
123456 hexo clean #清除缓存 网页正常情况下可以忽略此条命令hexo g #生成静态网页hexo d #开始部署#也可以一次性执行hexo clean && hexo g && hexo d