如何用axure制作一个完整的个人网站？

一、项目背景

去年关注了购买了大梨的知识圈，虽然有自己的个人blog，但是是基于WordPress制作，服务器又处于美国，一些想要的网站效果，以目前的水平，完全达不到自己想要的效果。

当看到大梨的网站时候，第一印象是用WordPress制作的，也没机会向大梨请教。

直到18年2月25日看到了人人都是产品经理的文章 http://www.woshipm.com/rp/941478.html 一看风格应该是大梨做的吧，于是询问了大梨，果然他的网站是用Axure做的，于是决定，我也做一个个人网站。致敬大梨。

本文不讲axure的具体设计，我用的是大梨的网站模版，里面直接套用了部分动效和功能。那就我在这里讲讲如何发布自己的个人网站吧。所以再说一遍本文重点讲如何发布自己的个人网站。

涉及文章：

1、不会编程？Axure一样可以做网站 http://www.woshipm.com/rp/941478.html

2、实战经验｜如何用Axure做出高保真的个人网站 http://www.woshipm.com/rp/1023046.html

ps：这两篇文章都没有讲如何发布个人网站的事情，这也是我写这篇文章的一个目的。另外向这两位致敬，提供了灵感。

二、项目启程时间

2018年2月26日-2018年5月1日

三、项目目的

1、拾起Axure

2、搭建个人品牌

四、步骤

（一）制作网站内容框架-思维导图Mindjet MindManager 2018

（二）现有资源整理（网址，软件，素材等）--截图软件HprSnap8

（三）整理相关素材（icon等）与配色-- http://www.iconfont.cn/

（四）Axure设计原型--2天时间搞定

（五）购买域名，服务器，上传网站，发布网站--2天时间

（六）推广=知识星球、微博、微信、知乎、人人都是产品经理等

五、详细进展

2月-4月忙于其他的事情，没有做相关的工作，就做了一个网站框架的思维导图。

4月底，开始收集了素材，设计原型。27、28号两天设计完毕

4月29号晚上开始搭建，

4月30日凌晨上线

六、重要里程碑事件-29日晚发布上线

2018年4月29日23：03具体进展--购买服务器

因为我现在有一个blog（ http://www.caiwenxue.com)，配套一台服务器，想在这套服务器上在绑定另一个域名。百度了几篇文章，

1、关于一个服务器中绑定多个域名——公司是用阿里云服务器--是使用多个tomcat来绑定

https://blog.csdn.net/qq_35692844/article/details/53068137

2、听说一个IP可以绑定多个域名，那么服务端是怎么实现的?

https://www.zhihu.com/question/29390934

看上去操作挺复杂的，不懂。还是最简单的方式，再买一个虚拟主机吧。

以下是购买服务器的过程

继续选择老薛主机 https://my.laoxuehost.net/aff.php?aff=8343

购买老薛的产品，我这里有个推荐码：laoxueNP，有一些优惠，大家可以用下。

接下来选择最便宜的主机，一年48元，因为我的第二个博客，主要是展示个人的平台，没有过多的信息更新和交互的，所以选择最便宜的。即使后期再拓展，老薛主机还是可以支持的。

现在老薛主机都提供绑定域名的服务了，我记得之前的域名还是自己做解析的！

将我的之前购买的域名，解析下，但是不知道支持“抱抱.我爱你”这种中文域名吗。试试吧

确认订单，支付

好吧，几年时间变化真大，都支持支付宝和微信支付了

支付完成，但是不知道为什么要审核？

截止4月29日23：58，还在审核中，不知道审核什么，那现在什么都做不了，就不做了，明天在上传网站吧

（ps：后续问老薛主机的客服，回答说不支持中文域名，需要做转码）

========================================

2018年4月30日00：30具体进展--走另一条路

一直在审核中，烦了，再找一条路，嘿，我这抱脾气，必须搞定。不能再一棵树上吊死！

========================================

登陆老薛主机中cPanel面板，发现有“子域”功能，百度之。操作方式如下

（一）参考教程

绑定二级域名完整傻瓜教程

https://jingyan.baidu.com/article/03b2f78c4cc0ad5ea337ae7d.html

二级域名设置解析方法

https://help.aliyun.com/knowledge_detail/39785.html?spm=a2c4g.11186623.4.3.c2RaHY

（二）操作步骤

第一步：在老薛主机cPanel面板创建子目录

登录cPanel面板

输入子域，这里设计为pm（忽略截图中的pmmp，刚开始设计时候用了pmmp，感觉不好，就换成了pm命名，但是当时没截图，姑且只参考下截图）

将axure设计完毕的文件上传到PM文件夹中（忽略截图中的pmmp，刚开始设计时候用了pmmp，感觉不好，就换成了pm命名，但是当时没截图，姑且只参考下截图）。（此办法是通过cPanel面板中的文件管理器上传，还可以通过ftp工具上传。

可能遇到的问题，工具栏明明在生成的时候关闭了，上传之后还是出现了。可以将index和start的html删除，复制第一个页面的html改名成index重新上传即可。可参照 http://www.woshipm.com/rp/941478.html

第二步：在万网解析二级域名

二级域名的解析设置无需申请或付费，直接进入万网云解析，设置解析记录时在主机名（RR）输入相应二级域名地址即可完成。

二级域名设置解析方法：

1、登录阿里云/万网【管理控制台】。

2、点击主导航栏【产品与服务】--【云解析】，进入域名解析列表页。

3、点击要解析的域名，进入解析记录页。

4、进入解析记录页后，点击【添加解析】按钮，开始设置解析记录：

您只需要在主机记录（RR 值）输入二级域名的对应字符即可实现对二级域名的解析设置。举例来说，假如您的域名是 http://caiwenxue.com，当您在主机记录填写“pm”，便可以针对二级域名 http://pm.caiwenxue.com设置解析。

这里的顶级域名是 http://www.caiwenue.com ，新开二级子域，名字是“pm”，那二级域名就是： http://pm.caiwenxue.com 配置如下：

记录类型：A记录；

主机记录：pm ；

解析线路：默认；

记录值：填顶级域名所在空间的ip（ping一下你的顶级域名就知道了。或者登陆cPanel面板查看服务器IP）

ttl：默认的10分钟就行了。

然后保存即可，大概几分钟后就会生效。

至此设置完毕，完美解析！！！！

结果如下

018年4月30日02：00，个人blog2.0上线发布，网址： http://pm.caiwenxue.com

欢迎使用！！！

七、后续事件

（一）前言： http://pm.caiwenxue.com上线了，但是隐隐觉得这不是它应该的使命，必须更新迭代。于是将之前做的淘宝项目、18年规划、自我品牌搭建等内容整合起来，于2018年5月1日做了2.0的框架。

（二）项目启动时间

2018年5月1日--2018年7月1日

（三）里程碑事件

axure部分：资料整理分类上线。5月份第一周

关于我：简历更新；项目经验整理上线，5月第二周

重要成长日记：先搭框架，选取重点里程碑时间，每周更新一次。5月第三周

会员体系+作品展示：搭建框架；每周更新一次。5月第四周

常见问题：整理上线，有更新，即更新

原型设计及上线安排。6月一整月

2018年5月1日，22：42

（四）当前状态-2019年6月12日更新

axure版个人博客，作为原型项目整合到自己的作品集中了，以上涉及的网址进行了整合，见jidong.tech这个网站

所以原 http://pm.caiwenxue.com作废，无法访问

个人微信号：15315130950 可交流，索要原型文件

-------2020年4月28日更新

jidong.tech搭建了小程序后台，不再支持访问预览个人博客了。

axure版的个人博客已经整合到所有原型中，预览地址demo.axuretop.shop

我的网站就是使用Axure制作的，网址是 http://51prd.com。支持电脑和手机查看网站。

提供一下制作的思路：

• 用Axure画出一个网站的原型，注意页面结构要清晰简单。建议以以1200px作为原型宽度。
• 生成原型到本地目录。
• 上传到服务器空间的根目录，需提前绑定域名。
• 访问对应的网址。

更详细的步骤，请用知乎APP打开该链接 如何用Axure生成一个Web网站。

在研究 Axure 制作静态网站的时候，发现有几个事情挺麻烦的。

预览工具栏的问题：

在预览Axure的原型时，左侧都会显示原型页面的工具栏，

在原型设计预览的时候是比较需要的，但是做网站却不需要这个，

最开始我是通过删除默认html文件的方式来隐藏的，每次更新网站的时候，就要重新删一次，后来发现把原型中的任意的页面改名为“index"，那么这个页面会成为网站的默认首页，并且也不再显示Axure的工具栏，就不用重复去删除生成的html文件了。

网址的问题：

Axure原型页面的名字就是生成后的html文件名，也是访问网页的地址名称，如果使用中文，那么浏览器会转码为一长串代码，不容易记忆和查看，这个相对简单，使用英文命名原型的页面名称即可。

favicon.ico 的问题：

.ico图片上传到网站托管空间后，下次更新网站文件时注意下，删除老文件时不要删除这个图片就行了，不需要重复上传这个图片。

网页标题名称的问题：

Axure导出html文件后，网页的名称是原型中页面的名称，但是为了简化地址，页面用的是英文名称。

但是我又希望在网页标题中不要显示英文名，而是显示网页标题和一些内容，所以需要单独取名，

Axure本身没有这个功能，所以之前都是在导出html文件后，打开html文件去修改网页的标题名称，和预览工具栏的问题一样，每次更新网站的时候，都需要去修改一次，而且页面越多修改的就越多，很多时候还容易忘记，非常的繁琐。

所以一直在寻找其他办法，直到最近无聊看了下前端的JS课程，发现可以通过JS代码嵌入Axure来达到修改网页标题的目的，再也不用更新一次修改一次文件了。

如何在Axure中设置网页标题呢？ 只需要将下面的这句代码：

javascript:$('title').html('公众号：世界是棵树')

设置在Axure页面的“页面载入时”的交互上，然后修改代码中单引号中间的文字就可以了。

至此，通过Axure来创建网站，且在更新过程中重复繁琐的事情已经解决完，再也不用每次更新都去重复的做这些事情了，另外我把《我的世界》和《互联网导航》的原型模板更新了该交互，大家可以下载后研究下该交互逻辑。

我的世界（ http://my.pmdaohang.com）

互联网导航（ http://hao.pmdaohang.com）

首先要看题主想做什么样的个人网站，静态网站还是动态网站。

静态网站，就是只展示内容的网站，动态网站，就是可以进行数据存储的网站。

axure做一为原型开发工具，具有十分强大的功能。axure能够通过元件设计原型、支持交互，并且能把原型生成html，甚至把可以把原型发布到axureshare访问，完全可以做一个静态网站。

至于做怎么做静态个人静态网站，那就跟做普通的网站类似，按照如下的步骤进行：

1、需求分析；

2、产品设计；

3、UI设计

4、产品开发

5、发布上线

只是第四步使用axure开发而已。

首先的收集素材，根据素材，加上创意，加上功能，等等，其实都是体现在实际开发中的，嘴巴说都是理论，比较空洞！

身为axure骨灰玩家，我想说你这个问题太笼统，我只能我画原型分以下几部

1、在xmind上画产品框架和产品逻辑架构脑图

2、在visio里画业务逻辑图流程图和功能结构图

3、根据以上绘制原型主要页面，先别加细节交互和弹窗、判断、参数等

4、美化。包括交互、跳转、各种动态面板、高保真UE、参数判断、中继器等

5、在每个页面写好原型交互和逻辑说明、相关产品prd文档

完工交差，等待领导的无脑挑刺和强制性优化建议吧

先进行同类产品分析，确定整体架构，形成统一交互方式，开始制作原型。