摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。
前言
搭建此博客是因为通过github上了解到github pages进而知道了可以把静态网页博客托管给github仓库
或许您已经通Git + Hexo 搭建个人博客网站了解到如何通过HEXO + GIT 实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。本文主要介绍HEXO的基本操作命令和网站的基本配置方法。
Github Pages 是 github 公司提供的免费的静态网站托管服务，用起来方便而且功能强大，不仅没有空间限制(为免费用户提供了500M空间)，还可以绑定自己的域名。
到 https://pages.github.com/ 上，看到可以创建的网站有两类，一类是为自己或者是自己的组织创建站点，就是新建一个仓库，仓库的名字叫做，username.github.io 或者是 orgnizationname.github.io ，注意这里的 username 和 orgnizationname 要严格替换成你自己的用户名或者组织名，大小写也要区分，不然就会有问题。然后就往仓库里面放页面内容就行了。第二类是为项目创建网站，这个其实主要步骤都是一样的，只不过稍微比创建用户或组织网站复杂一点点。
具体的可以看这个网址的讲解Github Pages
我是在万网注册的域名和设置DNS解析，所以我只会讲在阿里云下的域名绑定。
进入到控制台后点击自己刚买的域名进入域名管理界面，然后进行添加解析操作，按照途中所给的值填写，注意将记录值改为自己的github pages地址
最后一步必须在所建立的github仓库的主分支里建立一个CNAME文件内容为你要解析到的目地地址
Hexo博客搭建的基础大致流程为：
安装Node.js →安装Git → 安装Hexo → 安装主题 → 本地测试运行 → 注册给github与coding并创建pages仓库 → 部署
Node.js和git的安装大家自己去网上搜下，当以上都安好后可以通过git bash来输入命令查看是否安装成功以及对应的版本
随后执行下述命令来安装hexo
npm install -g hexo-clihexo初始化
安装完成后要先提前建好一个文件夹，所以我在自己D盘建立了一个hexo文件夹，里面随后剪了一个blog文件夹，用命令cd到blog这个目录
cd d:/hexo/blog
执行命令
hexo init # hexo会在目标文件夹建立网站所需要的所有文件 npm install # 安装依赖包
本地启动
有了必要的各种配置文件之后就可以在本地预览效果了
hexo g # 等同于hexo generate，生成静态文件到public文件夹 hexo s # 等同于hexo server，在本地服务器运行
还有个命令
hexo clean #作用为清除静态文件夹的内容并删掉，主要用于更改变更了某些地方导致页面显示不完善
之后打开浏览器并输入IP地址 http://localhost:4000/ 查看，效果如下
hexo new "title" # 生成新文章：source\_posts itle.md hexo new page "title" # 生成新的页面，后面可在主题配置文件中配置页面
生成文章或页面的模板放在博客文件夹根目录下的 scaffolds/ 文件夹里面，文章对应的是 post.md ，页面对应的是page.md，草稿的是draft.md
编辑文章打开新建的文章source_postspostName.md，其中postName是hexo new "title"中的title
--- title: Start My Blog Trip — Power By Hexo # 文章页面上的显示名称，可以任意修改，不会出现在URL中 date: 2017-2-10 23:49:28 # 文章生成时间，一般不改 categories: diary # 文章分类目录，多个分类使用[a,b,c]这种格式 tags: [Hexo,diary] # 文章标签 --- #这里开始使用markdown格式输入你的正文。 #more标签以下的内容要点击“阅读全文”才能看见，#more标签以上的内容为你首页显示文章的摘要部分MD文章编辑
如果你对MD语法不熟悉，推荐你去马克飞象使用它的在线网页编辑，可以实现一边打字一边查看效果，很方便。
地址：https://maxiang.io/
hexo init [folder] # 初始化一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站 hexo new [layout]# 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来 hexo version # 查看版本 hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public) hexo g # 等于hexo generate # 生成静态文件 hexo s # 等于hexo server # 本地预览 hexo d # 等于hexo deploy # 部署，可与hexo g合并为 hexo d -g</pre> <b>安装主题</b> <b>前言</b> <p>截止2017年，hexo和next都在更新，现今网上的版本和其对应的配置文件都已经发生了巨大的变化，所以我把官网最新的17年的版本配置文件的详情给大家来讲解，大家可以下最新的版本和看我的配置进行修改。</p> <b>主题下载</b> <p>hexo主题有很多，这里我自己使用的next主题所以就以它来讲。我的版本为v5.1.0（目前最新）<br>下载地址：<br>https://github.com/iissnan/hexo-theme-next/releases<br>把下来的文件夹解压和更名为next，并复制到theme目录下<script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000008725520?w=1543&h=161");</script></p> <b>HEXO网站的配置文件</b> <pre>在根目录下的_config.yml主要是对网站的总属性进行设置 如：网站标题，网站logo,网站插件使用等全局的属性 主题目录下的_config.yml主要是针对网站的布局，导航等特性设置进行设置</pre> <p>我的根目录配置文件</p> <pre># Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: Water Sister"s Blog subtitle: 生活、技术个人博客 description: 思考中..... author: Yang ZiHao language: zh-Hans timezone: # URL ## If your site is put in a subdirectory, set url as "http://yoursite.com/child" and root as "/child/" url: http://www.cduyzh.com root: / permalink: :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: - baidu_verify_n9RJHacKra.html - google5caece7c800b9ce3.html # 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: true 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 pagination_dir: page # Extensions Plugins: - hexo-generator-sitemap - hexo-generator-baidu-sitemap ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: github: git@github.com:cduyzh/cduyzh.github.io.git,master index_generator: per_page: 5 archive_generator: per_page: 20 yearly: true monthly: true tag_generator: per_page: 10 menu: about: /about #头像设置 avatar: /images/yzh.jpg # 多说热评文章 true 或者 false duoshuo_hotartical: true #sitemap # hexo sitemap sitemap: path: sitemap.xml baidusitemap: path: baidusitemap.xml #local search search: path: search.xml field: post format: html limit: 1000</pre> <p>我的主题目录配置文件</p> <pre># --------------------------------------------------------------- # Site Information Settings # --------------------------------------------------------------- # Put your favicon.ico into `hexo-site/source/` directory. favicon: /images/favicon.ico # Set default keywords (Use a comma to separate) keywords: "cduyzh前端开发博客" # Set rss to false to disable feed link. # Leave rss as empty to use site"s feed link. # Set rss to specific value if you have burned your feed already. rss: # Specify the date when the site was setup #since: 2015 # icon between year and author @Footer authoricon: tint # Footer `powered-by` and `theme-info` copyright copyright: false # Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog. # See: https://support.google.com/webmasters/answer/139066 # Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com ) canonical: true # Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization. seo: true # --------------------------------------------------------------- # Menu Settings # --------------------------------------------------------------- # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives) menu: home: / categories: /categories about: /about archives: /archives tags: /tags #commonweal: /404.html #sitemap: /sitemap.xml life: /categories/life technology: //categories/technology # Enable/Disable menu icons. # Icon Mapping: # Map a menu item to a specific FontAwesome icon name. # Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive. # When an question mask icon presenting up means that the item has no mapping icon. menu_icons: enable: true #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome home: home about: user categories: th schedule: calendar tags: tags archives: archive sitemap: sitemap commonweal: heart life: coffee technology: cog # --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #scheme: Muse scheme: Mist #scheme: Pisces # --------------------------------------------------------------- # Font Settings # - Find fonts on Google Fonts (https://www.google.com/fonts) # - All fonts set here will have the following styles: # light, light italic, normal, normal italic, bold, bold italic # - Be aware that setting too much fonts will cause site running slowly # - Introduce in 5.0.1 # --------------------------------------------------------------- font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default) host: # Global font settings used on <body> element. global: # external: true will load this font family from host. external: true family: Lato # Font settings for Headlines (h1, h2, h3, h4, h5, h6) # Fallback to `global` font settings. headings: external: true family: # Font settings for posts # Fallback to `global` font settings. posts: external: true family: # Font settings for Logo # Fallback to `global` font settings. # The `size` option use `px` as unit logo: external: true family: size: # Font settings for <code> and code blocks. codes: external: true family: size: # --------------------------------------------------------------- # Sidebar Settings # --------------------------------------------------------------- # Social Links # Key is the link label showing to end users. # Value is the target link (E.g. GitHub: https://github.com/iissnan) social: #LinkLabel: Link GitHub: https://github.com/cduyzh 知乎: https://www.zhihu.com/people/yang-zi-hao-cheng-du-da-xue Weibo: http://weibo.com/3290722423/ QQ: http://wpa.qq.com/msgrd?v=3&uin=450311265&site=qq&menu=yes # Social Links Icons # Icon Mapping: # Map a menu item to a specific FontAwesome icon name. # Key is the name of the item and value is the name of FontAwesome icon. Key is case-senstive. # When an globe mask icon presenting up means that the item has no mapping icon. social_icons: enable: true # Icon Mappings. # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome GitHub: github #Twitter: twitter Weibo: weibo QQ: qq # Sidebar Avatar # in theme directory(source/images): /images/avatar.jpg # in site directory(source/uploads): /uploads/avatar.jpg #avatar: # Table Of Contents in the Sidebar toc: enable: true # Automatically add list number to toc. number: true # Creative Commons 4.0 International License. # http://creativecommons.org/ # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero #creative_commons: by-nc-sa #creative_commons: sidebar: # Sidebar Position, available value: left | right position: left #position: right # Sidebar Display, available value: # - post expand on posts automatically. Default. # - always expand for all pages automatically # - hide expand only when click on the sidebar toggle icon. # - remove Totally remove sidebar including sidebar toggle. #display: post display: always #display: hide #display: remove # Sidebar offset from top menubar in pixels. offset: 12 offset_float: 0 # Back to top in sidebar b2t: false # Scroll percent label in b2t button scrollpercent: false # Blog rolls links_title: Links #links_layout: block #links_layout: inline links: hexo: https://hexo.io/zh-cn/ next: http://theme-next.iissnan.com/ web project: http://www.watersister.top # --------------------------------------------------------------- # Post Settings # --------------------------------------------------------------- # Automatically scroll page to section which is under <!-- more --> mark. scroll_to_more: true # Automatically excerpt description in homepage as preamble text. excerpt_description: true # Automatically Excerpt. Not recommend. # Please use <!-- more --> in the post to control excerpt accurately. auto_excerpt: enable: true length: 400 # Post meta display settings post_meta: item_text: true created_at: true updated_at: false categories: true # Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount: item_text: true wordcount: true min2read: true #Wechat Subscriber #wechat_subscriber: # enabled: true # qcode: /images/wechatpay.jpg # description: subscribe to my blog by scanning my public wechat account # --------------------------------------------------------------- # Misc Theme Settings # --------------------------------------------------------------- # Custom Logo. # !!Only available for Default Scheme currently. # Options: # enabled: [true/false] - Replace with specific image # image: url-of-image - Images"s url custom_logo: enabled: false image: # Code Highlight theme # Available value: # normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: night # --------------------------------------------------------------- # Third Party Services Settings # --------------------------------------------------------------- # MathJax Support mathjax: enable: false per_page: false cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML # Swiftype Search API Key #swiftype_key: # Baidu Analytics ID #baidu_analytics: # Duoshuo ShortName duoshuo_shortname: cduyzh # Disqus #disqus_shortname: # Hypercomments #hypercomments_id: # Gentie productKey #gentie_productKey: # Support for youyan comments system. # You can get your uid from http://www.uyan.cc #youyan_uid: your uid # Support for LiveRe comments system. # You can get your uid from https://livere.com/insight/myCode (General web site) #livere_uid: your uid # Baidu Share # Available value: # button | slide # Warning: Baidu Share does not support https. #baidushare: ## type: button # Share #jiathis: # Warning: JiaThis does not support https. #add_this_id: # Share duoshuo_share: true # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ #google_site_verification: # Google Analytics #google_analytics: # Yandex Webmaster tools verification setting # See: https://webmaster.yandex.ru/ #yandex_site_verification: # CNZZ count #cnzz_siteid: # Application Insights # See https://azure.microsoft.com/en-us/services/application-insights/ # application_insights: # Make duoshuo show UA # user_id must NOT be null when admin_enable is true! # you can visit http://dev.duoshuo.com get duoshuo user id. duoshuo_info: ua_enable: true admin_enable: false user_id: 6224774254659896065 admin_nickname: author # Facebook SDK Support. # https://github.com/iissnan/hexo-theme-next/pull/410 facebook_sdk: enable: false app_id: #<app_id> fb_admin: #<user_id> like_button: #true webmaster: #true # Facebook comments plugin # This plugin depends on Facebook SDK. # If facebook_sdk.enable is false, Facebook comments plugin is unavailable. facebook_comments_plugin: enable: false num_of_posts: 10 # min posts num is 1 width: 100% # default width is 550px scheme: light # default scheme is light (light or dark) # VKontakte API Support. # To get your AppID visit https://vk.com/editapp?act=create vkontakte_api: enable: false app_id: #<app_id> like: true comments: true num_of_posts: 10 # Show number of visitors to each article. # You can visit https://leancloud.cn get AppID and AppKey. leancloud_visitors: enable: true app_id: TxBSdzFliqxOpec29xEd8pO5-gzGzoHsz app_key: 5rH911Nhs9V7AWFjEYqe8Bz7 # Show PV/UV of the website/page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi/ busuanzi_count: # count values only if the other configs are false enable: true # custom uv span for the whole site site_uv: true site_uv_header: <i class="fa fa-user"></i> 访问用户： site_uv_footer: 人 # custom pv span for the whole site site_pv: true site_pv_header: <i class="fa fa-eye"></i> 访问次数： site_pv_footer: 次 # custom pv span for one page only page_pv: false page_pv_header: <i class="fa fa-file-o"></i> 点击量 page_pv_footer: 次 # Tencent analytics ID # tencent_analytics: # Tencent MTA ID # tencent_mta: # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: true # Google Calendar # Share your recent schedule to others via calendar page # # API Documentation: # https://developers.google.com/google-apps/calendar/v3/reference/events/list calendar: enable: false calendar_id: <required> api_key: <required> orderBy: startTime offsetMax: 24 offsetMin: 4 timeZone: showDeleted: false singleEvents: true maxResults: 250 # Algolia Search algolia_search: enable: false hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "We didn"t find any results for the search: ${query}" hits_stats: "${hits} results found in ${time} ms" # Local search local_search: enable: true # External URL with BASE64 encrypt & decrypt # Usage: {% exturl text url "title" %} # Alias: {% extlink text url "title" %} exturl: false #! --------------------------------------------------------------- #! DO NOT EDIT THE FOLLOWING SETTINGS #! UNLESS YOU KNOW WHAT YOU ARE DOING #! --------------------------------------------------------------- # Motion use_motion: true # Fancybox fancybox: true # Canvas-nest canvas_nest: true # Script Vendors. # Set a CDN address for the vendor you want to customize. # For example # jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js # Be aware that you should use the same version as internal ones to avoid potential problems. # Please use the https protocol of CDN files when you enable https on your site. vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js # Internal version: 2.1.5 # Fancybox: http://fancyapps.com/fancybox/ fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css # Internal version: 1.0.6 fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js # Internal version: 1.2.1 velocity: # Internal version: 1.2.1 velocity_ui: # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: //cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Internal version: 1.0.0 # https://github.com/hustcc/canvas-nest.js canvas_nest: //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js # Assets css: css js: js images: images # Theme version version: 5.1.0 # 多说热评文章 true 或者 false duoshuo_hotartical: true reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！ wechatpay: /images/wechatpay.jpg alipay: /images/alipay.jpg</pre> <p><strong>PS:</strong>可以不用一次性看完，理解下各个属性即可，官网也没有对所有配置的中文解释，只有一些例子配置对应的参数而已。</p> <p>相信绝大数人都没看完，大家可以后面自己配置的时候再来看。</p> <b>启用主题</b> <p>打开站点配置文件， 找到 theme 字段，并将其值更改为 next</p> <pre>theme: next</pre> <p><strong>注意:后有个空格必须要有空格哦</strong><br>然后 hexo s 即可在localshost:4000地址里预览主题效果</p> <b>更换主题外观</b> <p>next有三个主题样式</p> <pre># Schemes #scheme: Muse scheme: Mist #scheme: Pisces</pre> <p>我用的是第二个</p> <p>更换语言为中文，在根目录配置文件下配置language: zh-Hans</p> <pre># Site title: Water Sister"s Blog subtitle: 生活、技术个人博客 description: 思考中..... author: Yang ZiHao language: zh-Hans timezone:</pre> <b>添加网站小图标</b> <p>在主题目录配置文件下设置</p> <pre># Put your favicon.ico into `hexo-site/source/` directory. favicon: /images/favicon.ico</pre> <p>大部分的设定都能在NexT的官方文档 里面找到，如侧栏、头像、打赏、评论、订阅、连接、分享、数据统计等等，在此就不多讲了，照着文档走就行了，接下只是个性定制的问题。<br>所以给个官方文档大家可以自己去看一遍：<br>http://theme-next.iissnan.com/theme-settings.html</p> <b>部署发行项目</b> <b>前言</b> <p>假设前面已经注册了github帐号和创建了对应的仓库，通过配置SSH来建立连接。</p> <b>生成SSH</b> <pre>$ ssh-keygen -t rsa -C "邮件地址@youremail.com" Generating public/private rsa key pair. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车></pre> <p>系统会要求你输入密码，这里设置的密码主要是在你提交Git时弹出密码认证，不想输入直接回车</p> <pre>Enter passphrase (empty for no passphrase):<输入加密串> Enter same passphrase again:<再次输入加密串></pre> <p>成功后如图：<br><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000008725521?w=523&h=276");</script></p> <b>配置SSH</b> <p><strong>找到id_rsa.pub 并复制文件内容</strong><br>id_rsa.pub文件一般位于电脑用户配置文件夹下的一个.ssh文件下C:Users你的用户名.ssh<br><strong>登录Github并添加密钥</strong><br>进入github首页在右上角选择settings设置。<br><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000008725522?w=1272&h=472");</script><br>创建一个新的SSH key，图中显示我已经创建好了。<br>title可以随便取<br><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000008725523?w=723&h=325");</script></p> <b>测试通过git bash链接到Git</b> <p><strong>链接Git</strong></p> <pre>$ ssh -T git@github.com</pre> <p><strong>提示如下：yes</strong></p> <pre>The authenticity of host "github.com (207.65.227.44)" can"t be established. RSA key fingerprint is 16:27:42:18:60:1d:7b:13:d2:b5:c4:20:7e:56:86:d8:71:f3 Are you sure you want to continue connecting (yes/no)?</pre> <p><strong>以下为成功链接到Git</strong></p> <pre>Hi XXXX! You"ve successfully authenticated, but GitHub does not provide shell access.</pre> <p><strong>使用Git bash简单的设置一下用户信息：</strong></p> <pre>git config --global user.name your name git config --global user.email your_email@youremail.com</pre> <b>部署到Github</b> <p>在此之前，先安装Git部署插件</p> <pre>npm install hexo-deployer-git --save</pre> <p>打开根目录配置文件，拉到底部，修改部署配置：</p> <pre>deploy: type: git repo: github: git@github.com:cduyzh/cduyzh.github.io.git,master </pre> <p>注意冒号后面是网站对应的用户名，接着就是/，然后再是你的项目名加上 .git,master</p> <p>保存后终端执行</p> <pre>hexo clean hexo g hexo d</pre> <p>结果如下为成功上传<br><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000008725524?w=567&h=104");</script></p> <b>总结</b> <p>到这里基本上完成了hexo的配置和项目的上传，后面我会讲一些文章的编辑，分类，标签的运用，还会对next主题进行一些分析，如果想自己设置主题和样式建议先把next主题的官方中文文档看一下，我会对其中的一些进行解释。</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="混合云" href="https://www.ucloud.cn/site/product/uhybrid.html">混合云</a> <a style="width:120px;" title="私有云" href="https://www.ucloud.cn/site/product/ucloudstack.html">私有云</a> <a style="width:120px;" title="从零开始搭建前端数据监控系统" href="https://www.ucloud.cn/yun/tag/conglingkaishidajianqianduanshujujiankongxitong/">从零开始搭建前端数据监控系统</a> <a style="width:120px;" title="从零开始搭建腾讯云服务器" href="https://www.ucloud.cn/yun/tag/conglingkaishidajiantengxunyunfuwuqi/">从零开始搭建腾讯云服务器</a> <a style="width:120px;" title="搭建个人博客" href="https://www.ucloud.cn/yun/tag/dajiangerenboke/">搭建个人博客</a> <a style="width:120px;" title="个人博客搭建" href="https://www.ucloud.cn/yun/tag/gerenbokedajian/">个人博客搭建</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p> <p>转载请注明本文地址：https://www.ucloud.cn/yun/111760.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/111759.html">上一篇：在API 中，常用的code码</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/111761.html">下一篇：CSS3转换过渡动画</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/82089.html"><b><em>2017</em><em>年</em><em>最新</em><em>基于</em><em>hexo</em><em>搭建</em><em>个人</em><em>免费</em><em>博客</em>——<em>从零</em><em>开始</em></b></a></h2> <p class="ellipsis2 good">摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言 搭建...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-532.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000532.jpg" alt=""><span class="layui-hide64">zacklee</span></a> <time datetime="">2019-08-20 15:12</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/50572.html"><b><em>2017</em><em>年</em><em>最新</em><em>基于</em><em>hexo</em><em>搭建</em><em>个人</em><em>免费</em><em>博客</em>——<em>从零</em><em>开始</em></b></a></h2> <p class="ellipsis2 good">摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言 搭建...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-562.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000562.jpg" alt=""><span class="layui-hide64">hlcfan</span></a> <time datetime="">2019-08-01 16:31</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/111785.html"><b><em>2017</em><em>年</em><em>最新</em><em>基于</em><em>hexo</em><em>搭建</em><em>个人</em><em>免费</em><em>博客</em>——自定义页面样式一</b></a></h2> <p class="ellipsis2 good">摘要：添加你修改的代码找到你主题文件夹里的对应位置以我的路径为例子里面有个文件夹和一个文件，主要用于打包代码输出成样式的文件分析下其源代码。注意本人不提倡去修改除了下的其他个文件里的源代码，可能后面出问题不好还原。 showImg(https://segmentfault.com/img/remote/1460000008744124?w=1920&h=1280); 前言 之前答应一个评论朋...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1044.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001044.jpg" alt=""><span class="layui-hide64">curried</span></a> <time datetime="">2019-08-29 12:16</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/88174.html"><b><em>2017</em><em>年</em><em>最新</em><em>基于</em><em>hexo</em><em>搭建</em><em>个人</em><em>免费</em><em>博客</em>——自定义页面样式一</b></a></h2> <p class="ellipsis2 good">摘要：添加你修改的代码找到你主题文件夹里的对应位置以我的路径为例子里面有个文件夹和一个文件，主要用于打包代码输出成样式的文件分析下其源代码。注意本人不提倡去修改除了下的其他个文件里的源代码，可能后面出问题不好还原。 showImg(https://segmentfault.com/img/remote/1460000008744124?w=1920&h=1280); 前言 之前答应一个评论朋...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-510.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000510.jpg" alt=""><span class="layui-hide64">KevinYan</span></a> <time datetime="">2019-08-21 15:26</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/50596.html"><b><em>2017</em><em>年</em><em>最新</em><em>基于</em><em>hexo</em><em>搭建</em><em>个人</em><em>免费</em><em>博客</em>——自定义页面样式一</b></a></h2> <p class="ellipsis2 good">摘要：添加你修改的代码找到你主题文件夹里的对应位置以我的路径为例子里面有个文件夹和一个文件，主要用于打包代码输出成样式的文件分析下其源代码。注意本人不提倡去修改除了下的其他个文件里的源代码，可能后面出问题不好还原。 showImg(https://segmentfault.com/img/remote/1460000008744124?w=1920&h=1280); 前言 之前答应一个评论朋...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-947.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000947.jpg" alt=""><span class="layui-hide64">leoperfect</span></a> <time datetime="">2019-08-01 16:33</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-1681.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001681.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1681.html" rel="nofollow">Paul_King</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1681)" id="attenttouser_1681" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-1681.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116534.html">关于inline-block和float的对比</a></h3> <p>阅读 2106<span>·</span>2019-08-30 15:53</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115156.html">你应该知道的关于CSS的一些奇淫巧技</a></h3> <p>阅读 2294<span>·</span>2019-08-30 12:54</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113559.html">前端知识集锦1</a></h3> <p>阅读 1008<span>·</span>2019-08-29 16:09</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111760.html">2017年最新基于hexo搭建个人免费博客——从零开始</a></h3> <p>阅读 619<span>·</span>2019-08-29 12:14</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/106368.html">详解Vue服务端渲染</a></h3> <p>阅读 642<span>·</span>2019-08-26 10:33</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/105525.html">浏览器缩放监听</a></h3> <p>阅读 2264<span>·</span>2019-08-23 18:36</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/105339.html">每日一面——深入理解reduce方法</a></h3> <p>阅读 2791<span>·</span>2019-08-23 18:30</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/94908.html">Javascript 基本概念（操作符）</a></h3> <p>阅读 1977<span>·</span>2019-08-22 17:09</p></li> </ul> </div> <!-- 云社区相关服务 --> <div class="com_layuiright-box"> <h3 class="top-com-title"><span>云社区相关服务</span></h3> <div class="community-box flex_box flex_wrap community-box1"> <a href="https://www.ucloud.cn/yun/question/add.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon1.png" alt="提问"> <span>提问</span> </a> <a href="https://www.ucloud.cn/yun/article" rel="nofollow"> <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon2.png" alt="学习"> <span>学习</span> </a> <a href="https://www.ucloud.cn/yun/user/vertify.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon4.png" alt="认证"> <span>认证</span> </a> <a href="https://www.ucloud.cn/site/product/uhost.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon5.png" alt="产品"> <span>产品</span> </a> <a href="https://spt.ucloud.cn/30001?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon6.png" alt="技术服务"> <span>技术服务</span> </a> <a href="https://spt.ucloud.cn/30001?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon3.png" alt="售前咨询"> <span>售前咨询</span> </a> </div> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/product/uhost.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/Z7TLrpAi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/MWraMsBh.png" alt="混合云"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/ucloudstack.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/ifzOxvjW.png" alt="私有云"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/utrion.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/VDqwC1iN.png" alt="超融合服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220630/pJwnviKN.png" alt="服务器托管"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uxzone.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220630/CDb5uXxp.jpeg" alt="idc机房托管"> </a> </div> <div> <a href="https://www.ucloud.cn/site/active/network.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/230227/XWsSXmvm.png" alt="专线服务"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6> <p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://ucloudstack.com/" >私有云</a></p><p><a href="https://pinex.it" >pinex</a></p> <p><a href="https://www.renyucloud.com/" ></a></p> <p><a href="https://www.picpik.ai" >AI Art Generator</a></p> <p><a href="https://www.uwin-link.com" >工厂仿真软件</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/ask/">专业问答</a></p> <p><a href="https://www.ucloud.cn/yun/kc.html">云学院</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>