建立博客第一步：
把下载好的WordPress博客程序用FTP上传到根目录里面，然后解压出来，比如拿我空间的根目录为例：我的根目录是public_html这个文件,那么你把WordPress程序上传到根目录里面，那么你的路径应该是这样public_html/WordPress.zip(压缩包),把它解压出来，根目录里面就有两个文件(一个是压缩包，另一个是解压出来的文件)，到这里就是最重要的一步，就是把解压出来的文件夹里面的所有文件移动到根目录里面，就是把public_html/WordPress/这个路径地址里面的所有文件移动到public_html/这个路径下面就可以了。
建立博客第二步：
1.在浏览器地址栏里面输入你的域名，它会提示安装WordPress博客程序的提示；
2.然后提示你需要准备数据库名称，用户名和密码这些资料；
3.然后按照它的要求填写好之后提交；
4.之后填写站点标题和管理员帐号和密码(帐号和密码一定要记住)；
5.到了这一步基本完成，登录你的网站后台对网站进行布局，WordPress博客后台地址有两种路径一种是：你的域名/wp-admin,另一种是你的域名/wp-login.php这两种路径都可以访问到。
可以使用凡科建站，方法如下：
1、搜索凡科建站，进入官网之后点击右上角的“免费注册”，在注册页面中输入手机号码/邮箱、图片验证码、手机/邮箱验证码以及密码之后点击注册。
2、注册完成之后，会自动出现“概况”界面，然后点击其中的“进入电脑网站设计”，正式开始网站建设。
3、然后就进入网站模板挑选页面，里面包含了多种行业、多类风格，企业可以随意挑选，选择一个合适的网站模板并点击“使用”。
4、选择你喜欢的模板点击使用即可，可以对以下几方面进行设置，如：网站主题、网站横幅、页面版式、网站设置、百度优化等。
5、如果对某个模块不太满意，鼠标可停留在该模块右上侧，通过“编辑模块”即可自由修改图片和文字，同时还可以给各个模块添加上不同的特效。
6、然后，再为每个模块选择“模块动画”，包括淡入、飞入、放大、跳入等等，这些动画可以令页面更加活泼、生动。此时要注意所有动画的协调、统一。
7、企业可根据各自对网站设计的要求，按需选择一些适合的模块，比如点击页面中的浮动按钮“模块”，为页面添加更多实用模块，包括文本、产品展示、在线客服、新浪微博等等，然后编辑模块内容、样式，并将其移动到适合的位置。
8、同时，还有很多高级的功能，比如“当前位置”，这也就是常说的面包屑导航，但这个是按需选择的；另外还有在线视频、在线地图、魔方多图等等。
9、按照上面这些步骤完善好网站中的所有页面之后，点击右上角的“保存”按钮，然后点击“预览”中的网址，对网站进行预览，发现问题再返回继续完善，如果没有问题，一个网站就算制作完成了。
0代码轻松建站！点击这里获取精美网站模板：
如果是新手，用模板更加简便。如果是熟手，当然还是手工更好，有足够自由度和个性化。
建站策划：传统建站前期都是需要根据客户自己的需求来设计网站的，好的沟通能减少大量的时间成本，甚至有些客户都不知道从哪里入手，甚至要求开发人员帮客户制定行业需求而开发人员对客户所在行业又不甚了解，所以需求描述肯定会有部分瑕疵，这样会增加后期需求改动成本。
2
建站时间：传统建站一般需要半个月甚至一个月以上，对于想快速建站，肯定是等不起的，这么长时间的建站时间，时效性已经不再。模板建站一般是需要2到3天就可以完成，即使需要微调版面和改版设计也是很短时间完成，因为大致的框架早就设计完成。
3
网站后期维护和升级传统建站在后期维护方面比较麻烦，因为大多数建站公司的后台都是使用用他们自己公司的后台，而不是我们常见的织梦和帝国，这样需要升级和维护需要联系他们，这样也需要交纳一定费用。模板建站都是使用的是开源的网站管理系统后台：比如：“海站堂”的织梦模板和帝国模板，这样自己看看相关教程就可以完成对网站升级和维护，简单方便而且还免费。
4
建站费用：传统建站由于需要很多步骤，建站时间又长，所以价格也不菲，一般会是上千元以上，稍微增加一点功能的网站甚至价格在几千上万元。这是一般的中小站长不能承受的。模板建站几百元就可以完成，在较短时间内使用符合优化的模板这样节约建站时间让客户利益最大化。
普通的模板站大概是五六百左右，可以上米拓网参考参考。
应该不用的，现在的程序都是开源的，只要注明版权就不会有什么问题的，我现在就在这样做的，也没出现什么问题
本篇内容技术比较简单，大神自动飘过
VuePress是vue框架下静态网站生成器，用于生成技术文档相当实用。结合部署到github的站点功能，用起来不要太爽。编辑内容使用Markdown编辑器，做开发的肯定是喜欢这个编辑器了。整体流程就是打好框架，在里面编辑md文件，vue自动预览更新。编辑完成之后，build成纯静态文件，然后上传到站点中去，样子看着还是很舒服的。
这里有个缺点，就是只能处理纯静态的内容，想要动态内容自行绕过。另外，这个模块目前属于开发的alpha阶段，功能接口都有可能重新调整。
本文指导从零开始搭建所有的vuepress安装，使用并部署到github站点上成功运行。最终效果请点击文章底部的阅读原文。
安装注意，nodejs版本自己去找最新稳定版 直接上命令：
# 安装npm install -g vuepress# 新建一个 markdown 文件echo '# Hello VuePress!' > README.md# 开始写作vuepress dev .# 构建静态文件vuepress build .
上面命令是直接在根目录里面搭建的静态内容。一般这种技术文档，除非专门技术，都是在子文件夹下面的。
# 将 VuePress 作为一个本地依赖安装npm install -D vuepress# 新建一个 docs 文件夹mkdir docs# 新建一个 markdown 文件echo '# Hello VuePress!' > docs/README.md# 开始写作npx vuepress dev docs
官方指导再package.json的script里面添加一条快捷命令，感觉并没有降低多少要敲命令的成本，估计就是为了少计几个命令吧。
{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }}
运行起来站点，然后就可以开始进行写作了，保存文件都是实时更新的。
npm run docs:dev# 或者vuepress dev docs
编写完成之后打包静态文件
npm run docs:build# 或者vuepress build docs
打包之后默认会放在 ** .vuepress/dist ** 文件夹下面，把里面的内容全部直接上传到任何的空间下面都可以运行。不过可能因为使用绝对路径的原因，直接运行index.html的话，里面的样式图片脚本都不运行的。
文件目录这里对应的默认文件是 README.md ，类似index.html,index.jsp,index.php等等。引擎再打包的时候会把 README.md 解析成index.html。
.├── docs│ ├── .vuepress (可选的) # 用于存放全局的配置、组件、静态资源等。│ │ ├── components (可选的) # 该目录中的 Vue 组件将会被自动注册为全局组件│ │ ├── theme (可选的) #用于存放本地主题。│ │ │ └── Layout.vue│ │ ├── public (可选的) #静态资源目录│ │ ├── styles (可选的) #用于存放样式相关的文件。│ │ │ ├── index.styl #将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。│ │ │ └── palette.styl #用于重写默认颜色常量，或者设置新的的 stylus 颜色常量。│ │ ├── templates (可选的, 谨慎配置) #存储 HTML 模板文件。│ │ │ ├── dev.html #用于开发环境的 HTML 模板文件。│ │ │ └── ssr.html #构建时基于 Vue SSR 的 HTML 模板文件。│ │ ├── config.js (可选的) #配置文件的入口文件，也可以是 YML 或 toml。│ │ └── enhanceApp.js (可选的) #客户端应用的增强。│ │ │ ├── README.md│ ├── guide│ │ └── README.md│ └── config.md│ └── package.json
按照对应的目录结构，生成对应的路由，默认的 / 会解析 docs/README.md。而 /guide/ 会显示docs/guide/README.md的内容。/config.html 会显示 docs/config.md的内容。
固定链接使用过wordpress的人员应该都知道在设置里面有个选项是固定连接。vuepress的部分也是一样的。wordpress里面关于这块儿的中文翻译是
WordPress让您能够为您的永久链接和存档建立自定义URL结构。自定义URL结构可以为您的链接提高美感、可用性和前向兼容性。
这样可以在连接里面进行拼接 年，月，日，文件名等。由于vuepress关于博客部分的设计还不完善，关于作者，id，分类，等等就没有办法很好的拼接进来。使用方法可以通过全局配置或者局部文件配置来实现。
// .vuepress/config.js进行全局配置module.exports = { permalink: '/:year/:month/:day/:slug'}# 或者在文件前方进行局部文件的配置---title: Hello Worldpermalink: /hello-world---Hello!
可以配置选项有
:year # 文章年份，4位:month # 文章月份，2位，会自动补0:i_month # 文章月份，不会自动补0:day # 文章日，2位，会自动补0:i_day # 文章日，2位，不会自动补0:slug # 开启固定链接后的别名，英文。:regular # vuepress默认的链接
不过呢，我自己没有试成功，没有花时间去详细研究啥原因。
全局配置使用vuepress比较重要的部分就是设置配置文件了。由于默认的主题就挺好看的，自定义主题的事情再说了。
配置信息都包含在 docs/.vuepress/config.js 文件中，格式如下：
module.exports = { permalink: '/:year/:month/:day/:slug', //固定链接的全局配置 markdown: { //markdown编辑器的配置 lineNumbers: true, //代码显示行号，默认 false toc: { includeLevel: [1, 2] }, //显示目录的默认层级 }, title: 'Vue教程', //网站的标题，默认主题几个地方用到 description: 'Tingno记编写的VUE教程', //网站的描述 base:'/docs/', //要部署的根目录，不配置的话，都会到网站根目录下面 themeConfig: { //主题的配置信息 nav: [ //导航栏配置 { text: '首页', link: '/' }, //没有子导航的，显示文字和链接 { text: '基础', items: [ //有自导航的，就显示文字和子导航对象，下同 { text: '入门', link: '/base/base' }, { text: '常见文件', link: '/base/file' }, { text: '组件化', link: '/base/package' }, { text: 'ES6新特性', link: '/base/es6' }, ]}, { text: '核心', items: [ { text: '路由Router', link: '/core/Route' }, { text: '状态Vuex', link: '/core/Vuex' }, ]}, { text: '工具', items: [ { text: 'git', link: '/tools/git' }, { text: 'webpack', link: '/tools/webpack' }, ]}, { text: '博客', link: '' }, //链接也可以是外部链接 ], sidebar: [ //配置边栏的链接，一个对象、一个数组都可以。也可以分组，分组配置找官方。 '/', //默认配置链接，名称会自动生成，首页或者文件第一个标题 ['/base/base','入门'], //或者指定链接和显示标题 ['/base/es6', 'ES6新特性'], ['/base/file', '常见文件'], ['/base/package', '组件化'], { //复杂的带子目录的对象 title: '核心', //显示名称 collapsable: false, //控制子目录是否可折叠，默认 true，下同 children: [ ['/core/Route', '路由Router'], ['/core/Vuex', '状态Vuex'] ] }, { title: '工具', children: [ ['/tools/git', '版本管理工具git'], ['/tools/webpack', 'webpack'] ] } ], sidebarDepth:5, displayAllHeaders: true, // 显示所有活动链接，默认值：false activeHeaderLinks: false, // 关闭实时更新url的hash值，默认值：true lastUpdated: 'Last Updated', // 显示最后更新时间 //帮助编辑 // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL repo: 'q5276/vuestudy', // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为 // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。 repoLabel: '查看源码', // 以下为可选的编辑链接选项 // 假如你的文档仓库和项目本身不在一个仓库： docsRepo: 'q5276/vuestudy', // 假如文档不是放在仓库的根目录下： docsDir: 'docs', // 假如文档放在一个特定的分支下： docsBranch: 'master', // 默认是 false, 设置为 true 来启用 editLinks: true, // 默认为 "Edit this page" editLinkText: '帮助我们改善此页面！' }}
当然还有好多其他的配置信息，可以直接通读官方文档去了解。
局部配置官方文档里面一直强调用 YAML front matter 来进行配置，由于孤陋寡闻，英文太烂，看的我一脸懵逼。后来了解，就是在你编辑文档的头部直接使用 两个 --- 进行包围的配置信息，YAML也姑且理解为也是一种标记语言吧。格式就是一行一个配置，通过冒号: 进行配置名和配置值的设置。举例
---editLink: false---# 下面是markdown的正文内容
所有在具体的文档里面放的 YAML标记都属于局部配置信息。配置解释为：
---#默认主题中配置首页的配置信息home: true #设置true就代表是首页了actionText: 快速上手 → #中间有个按钮的文字actionLink: /base/base #中间按钮的链接features: # 下面内容直接对照下默认主题上显示的内容就知道了- title: 方便理解 details: 总之是各种奇奇怪怪的帮助理解例子，懂就懂，不懂拉倒。- title: VuePress驱动 details: 照着VuePress官方教程搭建的这个文档，至于内容，当然是把以前写的那些复制粘贴上来了。- title: 高性能 details: VuePress最后会渲染成一个静态文件，你说高性能不性能。如果你打开的慢，只能说明站长比较穷，服务器太差。footer: MIT Licensed | Copyright ? 2018-present Evan You #其他常用配置信息navbar: false #禁用侧边栏sidebarDepth: 2 #标题嵌套深度sidebar: auto #自动生成侧边栏prev: ./some-other-page #上一篇内容next: false #下一篇内容，false是没有editLink: false #禁止全局配置里面编辑文件部分pageClass: custom-page-class #自定义类名layout: SpecialLayout #自定义布局的组件名---Markdown 拓展
由于我平时编辑内容使用的是有道云笔记，所以罗列一些在有道云笔记的markdown文档里面没有的，而且感觉还挺有用的拓展。
vuepress里面默认是会给所有的标题都加上锚链接，h1-h6，并且会根据标题来生成目录。直接在内容中使用 [[toc]] 会生成自动目录。代码高亮，在代码开始标记后进行``` js{4,6} 可以指定js代码行高亮。VUE拓展既然使用了vue引擎，vue特性当然也少不了。在md正文里面，可以直接使用 {{}} 进行一些处理，比如vue的模板语法
{{ 2 + 1 }} <span v-for="i in 3">{{ i }} </span>{{ $page }}
也可以使用 vue的组件语法，样式预处理器如scss、less，脚本样式，内置组件等等。不过由于初期使用，没有过多涉猎，不好瞎说。
Github站点部署经过上面一大堆文件配置文件，安装文件摧残之后，进行文件打包生成静态文件，就可以进行站点发布了。当然你也可以自行购买空间、域名进行配置。配置好之后直接ftp把文件传上去就完事儿了。
这里用到的是Github里面的 Github Pages服务，可以放一些静态文件进行项目展示。打开翻了翻里面提供的一些模板，发现好多开源项目的文档介绍文件都是用的这个服务。
废话到这里。
第一步： 注册github账号，不赘述自行注册。
第二步： 新建库（New Repository），库名注意 <用户名>.github.io。其他选项默认，然后点击创建按钮 Create Repository
第三步： 根据提示，设置本地代码库与线上的库的绑定，上传代码。上传代码之前记得添加.gitignore文件，屏蔽一些无用的和敏感文件。
echo "# <用户名>.github.io" >> README.mdgit initgit add README.mdgit commit -m "first commit"git remote add origin <用户名>/<用户名>.github.io.gitgit push -u origin master
第四部： 配置github pages。在库详情中 设置settings > 选项options > GitHub Pages 部分选择资源。设置后就可以使用 <用户名>.github.io 进行访问了。也可以设置下面的自定义域名Custom domain，把自己的二级域名使用CNAME别名解析到 <用户名>.github.io 上去，看着更好看。我就是这么搞的。
第四步： 就是进一步内容更新了，将编辑将打包的部分持续上传上去了。
正常编辑过程中是保存即所得的，内容编辑结束了才需要打包上传的。 到这一步我自己的折腾成两个不相关的库，发现两个库来回跳转。官方提供了一个方便的部署脚本，属于比较干净的那种。我这里直接修改成适合自己理解的，比较笨的一个。上传的时候直接执行下面的脚本就完成了源码库打包，上传，复制打包好的文件到发布库，然后进行更新上传的操作。
#!/usr/bin/env sh# 确保脚本抛出遇到的错误set -e# 生成静态文件npm run docs:build# 上传源码githubgit add -Agit commit -m 'deploy'git push# 复制站点文件# 首先删除原来文件夹下的所有内容rmdir --ignore-fail-on-non-empty G:/githubpages/docs# 复制打包好的文件 cp -avx "G:vueSSRdocs.vuepressdist" G:/githubpages/docs# 进入生成的文件夹cd G:/githubpages/# 如果是发布到自定义域名# echo 'www.example.com' > CNAMEgit add -Agit commit -m 'deploy'git push# 如果发布到 https://<USERNAME>.github.io# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 如果发布到 https://<USERNAME>.github.io/<REPO># git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pagescd -# 最后刹车一下，不然刷刷也不知道刷了点儿啥read -p "Press any key to continue." var文末
到这里，就做了一个跟vue官方长一样的文档管理站点了。效果请点击文末的阅读原文或者查看更多了解。通过里面点击查看源码也可以看到发布在github上的源码。内容基本上都是跟着官方文档一步一步下来的。
欢迎鲜花和板砖，都是天天向上的动力。
最近拉了网上的开源小程序代码套了个博客小程序，发布上线，有兴趣的同学可以体验下。
另外，关于小程序美团家做了个vue和小程序集合的框架mpvue，回头研究下。
现在网上许多网络公司退出的超低价建站套餐，680元就能做一个高质量的网站，但是这样的往往是个坑。而且这些坑往往让人有苦说不出。今天，小编就来简单介绍一下这些“坑”。
一个完整的网站=域名+服务器空间+网站程序+后期维护，接下来让我们来分别看下这四个部分。
一，第一个“坑” 网站域名
许多打折超低价格名义来做网站的网络公司，域名管理权都在网络公司手里哦，等你以后不想找他们合作的，想把域名转出，那么不好意思请交钱... 小编遇到好多这种被坑过的案例了。那么多少钱买一个域名才是合理的呢？
小编在这里给大家推荐行业大佬阿里云。
一般不太热门的网站域名价格都在55元/年左右，比如小编刚测试的 chinazuowangzhan.com 。一般个人网站或者小微企业网站的域名以自己公司名字来起域名，价格都在55元左右。当然如果愿意花更多钱可以买到更顶级的域名。
从阿里云买的域名，管理权就在自己手里，不怕网络公司后期的勒索了。
二，第二个“坑” 服务器空间
超低价格的建站服务，往往都是用特别便宜的服务器，承载成千上百的网站。这样的网站打开速度可想而知。一个网站的打开速度是至关重要的，一般来说，初次浏览者正常等待网页超过3秒钟就开始有反感（以4M带宽为标准）打开的耐心为7s左右，超过这个数值，一般不会再继续访问了。这跟网站的服务器有着很大的关系。那么一个正常的普通服务器需要多少钱呢？
阿里云上的独立IP虚拟主机的价格是298每年。这个算是做一个小型网站成本的大头了。
三，第三个“坑” 网站程序
超低价格做的网站，基本都是模板做出来的。建站公司有无数套事先做好的各行各业的网站模板。接到单子后只需要改改LOGO图片，替换公司名称和和产品信息，联系方式就完成了。这样的网站是不可能根据客户的需求做出不同版式风格的，如果一个企业不能展示出他自己公司的优势特点，我觉得这样的网站也就没有什么存在的意义了。还有就是如果企业仅仅需要有个网站在展示，这样的基本要求问题不大。但是如果需要做网站优化，或者后期的百度推广 那各种麻烦就来了。
这样的模板网站的源代码里，有着各种不为人知的秘密。许多建站公司正式靠这种嵌入到源代码里的反向链接，广告链接赚大了。
小编在这里给大家推荐免费的建站程序wordpress，适合小白初级建站，操作简单，不需要懂代码，也没有建站公司嵌入的恶意代码。
到word press的官网下载建站程序 。上传到自己的服务器空间，就可以根据提示一步一步做好网站了。
四，第四个”坑“ 后期维护
如果有一天，做好的网站上需要修改部分内容。那就惨咯。当初680给你做网站的，简单修改了模板后把网站上线了，然后要不就是杳无音信，要不就是开巨额的维护费...
用小编推荐的wordpress程序，所有内容自己都可以修改。源代码属于自己。还有各种各样丰富而且免费的功能。额...声明下这真不是打广告的。
群晖NAS主要的作用就是网络储存，你可以理解为百度云，但这个百度云的服务器放在了家里。个人而言，有了NAS以后，家里的所有设备（台式电脑，笔记本电脑，手机，平板等等一切能联wifi的设备）都能访问这台NAS，共享资料。这样省去了经常需要互拷资料的麻烦，举个例子：有了NAS以后，你想用手机看电脑刚下载好的电影，你不需要拿出数据线拷电影，你只需要把电影拉进去NAS，然后手机访问这台NAS，就能观看。NAS能做的不仅仅是储存，它还能作为一台简单的服务器，完成一些相对简单的工作，例如在家自建博客。当然，NAS还有许许多多的优点，在此就不一一列举了。
今天讲的就是通过群晖来搭建自己的web博客。
WordPress介绍：WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统（CMS）来使用。
WordPress是一款个人博客系统，并逐步演化成一款内容管理系统软件，它是使用PHP语言和MySQL数据库开发的,用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。
WordPress有许多第三方开发的免费模板，安装方式简单易用。不过要做一个自己的模板，则需要你有一定的专业知识。比如你至少要懂的标准通用标记语言下的一个应用HTML代码、CSS、PHP等相关知识。
WordPress官方支持中文版，同时有爱好者开发的第三方中文语言包，如wopus中文语言包。WordPress拥有成千上万个各式插件和不计其数的主题模板样式
一、安装环境博客程序有很多种，例如zblog，emlog等等等等，但最多人用的还是wordpress，个人也倾向于使用热门的东西，毕竟多人用，教程多，出了问题也好找解决方案。
先去群晖的套件中心安装以下3个套件
分别是：
Web Station
phpMyAdmin
MariaDB 10
PHP7.2
APACHE2
二、创建数据库浏览器输入账号root密码为安装MariaDB 10套件时设置的密码选择服务器-MariaDB 10192.168.x.x的IP为群晖的内网IP新建填写数据库名称创建三、下载并安装WordPress主程序访问WordPress官方网站,下载最新版.在群晖Web文件夹下创建博客主目录,命名为wordpress(或其他任意文件名).将下载并解压的文件夹内的所有文件及文件夹拷贝至博客主目录.设置wordpress文件夹权限为http应用到这个文件夹,子文件夹和子文件确定四、配置PHP打开Web StationPHP设置,选中Default Profile,版本为7.2,编辑.扩展名勾选全选,安装扩展.五、配置Web站点打开Web Station虚拟主机新增填写你的域名文档根目录选择刚才在Web下创建的文件夹HTTP后端服务器选择 Apache HTTP Server 2.4PHP选择Default Profile(PHP 7.2)六、配置WordPress博客在浏览器中输入你的域名开始配置WordPress博客
数据库名称填写刚才phpMyAdmin创建的数据库用户名root密码填写群晖安装MariaDB 10时设置的密码数据库地址填写localhost:/run/mysqld/mysqld10.sock开始安装：
填写站点标题填写用户名填写密码填写电子邮件安装WordPress安装成功
登陆
安装完成：
开始访问我们的博客吧
学习网络技术的话可以关注我，每天都会有相应的教程发布的！
