近几年以来我陆续接了一些做品牌备案的建站的业务，后来出于优化收入结构把这个业务停掉了，但是很长时间以来还是陆续有朋友来问我独立站相关的问题，我觉得索性花一个星期时间做一个针对亚马逊卖家的用SiteGround虚拟主机从0搭建独立站【购物站】的教程好了，有时间的自己动动手也挺好。
本教程解决问题：小白如何从0搭建购物网站
本教程使用方案： WordPress+WooCommerce【为什么使用此方案 查看：谈谈跨境电商独立站】
由于是针对亚马逊的所以此购物网站可以用来：
- 修改亚马逊listing标题描述等内容
- 美国商标申请的使用证明
- 买家直接下单购买付款到PayPal
- 引导买家联系获取Review
- 。。。。。。
本文是0基础教程，所有问题会尽可能说的详细(废话会很多)，有问题或其他需求欢迎留言，本文随时补充。
这个教程断断续续做了一周，但是整个流程做起来大概只需要1-2个小时，熟练的话更快。
本文目录：
第一章：建站前的准备工作
01 主机分析-为什么用SiteGround
02. SitegGround的注册流程
03 域名的注册
第二章：建站的进行
00序-建站前的网站分析
02. 域名的解析和绑定
04. 安装Wordpress必备插件
05. 最后的设置
- a. Wocommerce设置
- b. 产品的上传
- c. 页面的调整与设置
- d. Logo的设置
- e. Menu的设置
- f. Footer的设置
- g. Copy Right Area的设置
- h. Social Account 设置
- 结束
第二章：进阶版教程 【待更新】
01 . https设置 ssl证书
02. Google Webmaster 设置/ bing设置 /yandex设置 / GA设置
03. 网站速度优化
– Gzip压缩
– 图片压缩
– 等等
03. 企业邮箱设置 与登录
第一章：建站前的准备工作
建站首先考虑的是域名和主机。域名就像一个品牌，有的人去找苹果，有的人去找谷歌，你的潜在客户找的就是你的品牌，所以域名一般建议和品牌名有些关联，.com域名优先考虑。
而主机就像是个房子把你的品牌【网站】放进去。你可以先注册主机后注册域名，也可以先注册域名后注册主机，没区别。
这里用的主机服务商是 SiteGround 域名服务商是 阿里云（下面会做简单分析）。不同的服务商有不同的好处，这肯定不是最佳搭配，但是我认为用这两个起步已经能解决大多数人的问题。
主机是一个大件，我觉得还是单独用几段文字普及一下
1. 尽量使用国外服务器
使用国外的服务器有几个好处，一个是免备案，另一个是终端客户访问起来速度较快。
关于速度，这个其实很好理解，我们的网站内容其实是放在全球某地的服务器上，如果你肉身在美国访问美国当地的服务器，距离更近，当然速度就会更快。距离越远，延迟就越高（一般最多几秒 ）。
关于备案，简单科普。所有的网站如果数据要放在国内的主机上必须要再工信部做备案(免费，时间大概10天左右)，以做一定的监管。如果我们做的业务和国内无关完全没必要用国内的主机，访问速度慢，监管繁琐的问题会让你头疼死。
2. 尽量用老牌服务商，信誉有保障
我们的网站内容其实是在别人家里【比如美国】，服务商只是给个账号过来让我们能有权限管理这些数据，那么数据的安全就非常重要了，会不会出现被删库跑路的现象，造成数据丢失呢？
SiteGround这个主机服务商成立于2004年的保加利亚，从成立至今已经为超过200万个网站提供服务，主要业务由共享主机，云主机，独立主机VPS，域名注册以及电子邮箱托管这些业务。
作为一个老牌服务商，SiteGround跑路的风险非常低，另外SiteGround 所有主机计划都提供免费每日备份，一旦有数据问题哪怕是你自己不小心删除了数据，也可以通过网站上的工具及时恢复。
总结：
其实对于中国用户常用的国外虚拟主机服务商，通常是Bluehost 和 SiteGround，整体表现也都差不多，但是相比较来说我更喜欢SiteGround， 主要是SiteGround 的客户服务随叫随到，随时解决网站意外问题，这点我觉得尤其重要。
SiteGround 提供三种套餐，通常我建议选GrowBig这个套餐，相比 Start UP 来说多了很多功能，其中 缓存的功能（提升网站速度）和多网站托管的功能我认为最实用，GoGeek我相信很多人都用不到。
进入 SiteGround官网 以GrowBig为例演示下单流程 ，
点击 GET PLAN 按钮
先看下面的域名注册再来此步骤
用你刚才注册的域名填入， 比如我注册的域名是 hwq100.com 点 PROCEED
然后进入到付款页面， 把带星号的必填项填完
- 邮箱
- 密码
- 国家
- 城市 & 街道&邮编
- 名字 & 电话
VAT / Company是可选项，其他可以不填，如果国家不符可能付款的时候有风控会无法付款成功
输入信用卡信息
选择数据中心
SiteGround 在 新加坡 /美国 / 英国 / 欧洲 都有其数据中心，原则上尽可能把数据放在离客户近的地方，比如美国用户为主的网站一般选美国数据中心
订阅周期
这里要明白服务商的逻辑，几乎所有的服务商都在赚用户续费的钱，服务商可以花大价钱(广告费或者推广费)把用户吸引过来为的就是有朝一日用户用的爽了愿意一直付费下去，所以通常续费价格会比初次购买贵一点
可选服务 19.8美金/年
SiteGround提供网站监测功能，可以防止你的网站被黑客攻击或者病毒感染。【我觉得小网站一般用不到，可以等网站月销售5W刀以上再考虑】
确认好之后，点击PAY NOW
付款完成页面会返回提醒 & 同时邮箱会收到收据
付款完成页面会返回提醒 & 同时邮箱会收到收据
来到页面 点击PROCEED TO CUSTOMER AREA进入后台登录页面
到此账号注册完成，下面进行域名的解析和绑定
域名的注册需要确定好 域名 和 域名服务商。
关于域名名字
域名的名字尽量还是和品牌相关，如果没有品牌就尽量和行业相关，如果品牌被注册就用品牌+尾词(自行发挥)
比如你的品牌是 abc 行业是电子 域名可以是
- abc.com
- abctronic.com
- abchub.com
- abcstore.com
- abc100.com 等等
关于域名服务商
域名的注册我是比较习惯用阿里云。
其实用阿里云有个问题，因为受国内规则的影响，如果你的网站出现了不合时宜的内容【多半是政治因素】，域名会被干扰无法解析。所以这里多说一个国外的域名注册渠道Godaddy。
如果你有此担忧或需求建议用Godaddy，如果没有我更喜欢阿里云。
PS：其实SiteGround也有域名注册的业务，我觉得太贵另外还不方便，还是阿里云或者Godaddy为主。
第二章：00序: 建站前的网站分析
开始我就说了，为了最大化的利用独立站，我们需要此网站需要符合以下几个要求
- 符合美国商标申请使用证据的要求
- 符合亚马逊修改产品listing内容的要求
- 可以接收买家付款
- 可以搜集潜在Reviewer
接收买家付款和搜集资料【表单】比较简单，我这里详细说说前两个。
美国商标局内部资料是这么写的。
我的网站是否是合适的用于商品的样本？
网站是一个可接受的样本，如果标志靠近商品的图片（或商品的文字描述）和您的客户可 以从该网站上订购商品。仅仅广告商品的网站是不能接受的。您必须提供该网站的截屏； 即，仅仅提供网站的地址是不可接受的。
我们简单提炼以下就是说。
- 使用证据为网站截屏
截屏中需要提现
- 网站带购物车能购买【有 Add to Cart 或者 Buy Now 按钮】
- 网站有体现品牌Logo
- 品牌Logo和商品图片或者描述距离不远【买家购买的时候清楚的知道这个是个品牌】
但是实操上随着审查员的审美疲劳，不同的网站样式，不同的设计方案对商标的通过与否也有了不同的影响。
所以如果你做亚马逊你就会明白凡事要趁早。越晚成本越高。
参考: 关于美国商标申请使用证据的要求
关于listing的修改，亚马逊内部和卖家的沟通邮件是这么说的。
翻译过来就是
- 产品页面必须体现有UPC或者EAN码
- 产品页面的品牌必须和亚马逊品牌备案的品牌一致【如有】
根据实际操作中，还有以下要点
- 产品品牌图片和摆放顺序要和亚马逊listing完全一致
- 产品标题描述和要点要和亚马逊完全一致。
问题整理清楚了，我们就可以开始做建站工作了。网站的原则：主要以实用为目的 尽量兼顾美观。实用性以外的外貌调节，多看看自己也就会了，不是什么难事。
登录SiteGround的后台： https://login.siteground.com/
19年SiteGround 对后台的界面做了调整，新版的界面非常好用
进入后台 ，点击 Website 进入 网站列表
我前面提过，GrowBIg出了网站缓存的功能(让网站速度更快)，还有多网站托管的功能，如果要新增网站从点 +号 Add New Site开始；
我这里着重说先完成这一个网站的搭建，hwq100.com这个域名我们注册主机的时候就自动绑定在主机上，所以点击 Complete
关于多网站托管
- 在可以多网站托管的主机账号上，多个网站的数据可以放在同一个空间
- 不同品牌的官网放在同一主机上不会引起店铺关联
系统询问我们是 Start New Website / 开启一个新网站还是 Migrate Website 移动之前的网站数据到这里来，我们这里是点击 Start New Website
关于网站移动
对于新用户来说，SiteGround提供一个网站数据的免费移动机会，此机会永久有效，只要有需求就可以找他们来做
因为我们是搭建购物站，所以依次选择 W+Woo 【Wordpress+ Woocommerce】
然后设置 WordPress后台的管理员登录账号和密码
设置好后 点 Continue
关于WordPress
WordPress是一个CMS管理系统，需要登录才可以对数据进行管理，管理员可以设置不同的用户对应不同的权限
如果你只做博客用，完全可以选第一个WordPress，Woocommerce是一个将博客变成购物站的一个插件，可以随时被卸载或安装
然后系统又出现提示，是否选增值服务， 我这里直接点 Finish
小站不需要此功能，我这个演示网站更不需要此功能了
Finish之后 进入网站安装流程； SiteGround会把WordPress数据和对应的Wocommerce数据安装到你的主机上
我们现在需要把域名和主机进行绑定，绑定后用户通过访问域名就可以直接访问网站数据（打开网站）
我们现在已经把网站数据安装好在虚拟空间里了，理论上我们已经可以通过某个地址来访问此网站数据，但是操作上所有服务商都会禁止此类访问(也出于安全考虑)，因为没有人会用一串数组或字符来访问网站，只会通过一串有意义的字母或数字来访问。这就是域名存在的意义。
我们先看现在网站数据在哪个地址，在上一步Finish之后，会收到一封邮件
邮件里面有如下信息 ，这就是服务器的DNS地址
- ns1.giow1050.siteground.us
- ns2.giow1050.siteground.us
我这个服务器是专门注册来做演示用，所以很多信息都不屏蔽，你们用的时候需要对自己的信息保密
如果你没看到邮件你还可以在这里看到
回到 Website — … 设置 — Server Details
点击 Server Details 弹出 这里的信息就是你此域名对应的 NS地址和 IP地址
我们只需要把 NS地址设置 或者 IP地址设置网站就可以通过域名打开了
我这里简单起见直接用NS地址，因为后续我还要做企业邮箱的设置，如果你和我一样设置不会有任何问题
如果你用解析了IP地址，网站一样可以正常访问 没有任何问题
了解更多查看： 域名的解析 
现在访问 www.hwq100.com 网站是这个样子的
现在访问 www.hwq100.com 网站是这个样子的 
我们现在在阿里云后台找到域名做一个解析
进入阿里云后台 依次进入 控制台 找到对应域名 点 管理 —- DNS修改
修改后 点确认 通常阿里云会进行手机验证码以确认安全
修改后 当前DNS服务器为
到此解析完成，一般情况下，大约过5分钟网站就可以访问了。阿里云承诺DNS解析24-48小时生效一般用不了那么久。
现在 网站已经可以正常访问了 ，这就说明解析正确，Wordpress也安装正常
我们现在进入后台 ，Wordpress后台的登录地址默认是 网址/wp-admin 【出于安全考虑可以修改，后面会提】
我的地址是 www.hwq100.com/wp-admin
账号是： lester@xygj.tech 密码是 junjianyu.com
这个网站信息暂时不做修改 供大家交流使用，不要乱删东西哦
登入后台后 先安装Avada主题包
关于Avada
Avada 官网 https://avada.theme-fusion.com/
主题包介绍 ，如果你想，你可以模仿主题模板做出一样的网站
- 有需要的可以找我，我免费发给你
- 如果你要支持正版可以在 themeforest上购买，正版激活后可以导入模板 自动升级
关于主题包
WordPress是一个开源的网站管理系统，不同的服务商针对WordPress做了很多外观和结构上的优化，对于网站的优化非常重要。使用主题包可以让我们事半功倍。 如果你不用，也是完全可以的，麻烦点而已。
其他主题包
WordPress提供了几个版本的免费主题可以在主题市场上选。当然这些多数都不怎么样。
如果你想支持正版或者希望了解使用其他主题，可以在 www.themeforest.net 上查看.
登录后进入这个页面， SiteGround 为了帮助用户的使用，做了一款 WordPress Starter的插件，我认为没什么用，直接Exit 跳过，感兴趣的可以自己摸索摸索
依次进入Appearance —- Theme
可以看到 WordPress默认安装有4个主题包，其实都不怎么好用下面会一个个删除掉
点 Add New 添加新的主题包
点过 Add New 之后久进入了主题安装市场 这里都是WordPress官方提供的几款主题包，都是免费的
我们点 Upload Theme 然后点 选择文件 上传Avada安装包
然后 Install Now 进行安装
安装后返回成功信息 ，直接点Active 激活
激活后你去前台看，页面已经有了变化
安装成功后有些后续的步骤， Avada会定期发新的补丁应对bug，每次看到有提示 进入Fusion Patch 直接点Apply Patch即可
Patch Applied
如果你想删除多余的主题包
可以回到 Apperance – Theme 删除掉不用的主题包 【不删也不可以，不过以后不会用到了还是删掉的好】
单击要删除的主题包名字 然后弹出框点右下角Delete
Delete
至此 主题包安装完成。
需要安装的插件有哪些
除了Avada 必备的插件
- Fusion Core
- Fusion Builder
我推荐使用的插件有
- AMP 【谷歌手机端访问加速插件】
- Yoast SEO 【帮助你优化网站】
- TinyMCE Advanced 【增强编辑器】
- Smush Image Compression and Optimization 【压缩图片大小】
后面会提到，真的非常有用，Wordpress耕耘了几十年开源，有巨多好用的免费插件，这是Shopify不能比的。
如何安装插件 ？
使用Avada主题包有两款配合主题包使用的插件一定要用 Fusion Core 和 Fusion Builder
进入 Avada – Plugins – 指向需要安装的插件 点 install 即可安装和激活
依次对这两款插件进行安装
安装后再指向 插件就会有 Deactive的选项 【停用】
然后回到 Plugin — Installed Plugin 这里可以看到 Fusion Core 和 Fusion Builder 已经存在
然后我们停掉两个无用的插件，插件会导致网站变慢，没用的插件直接删掉
删除插件步骤：
在插件下方点 Deactive 之后会出现 Delete 按钮，delete即可
安装插件步骤：
点 Add New 按钮
Search 关键字 然后 Install Now 然后 Activate 即可
安装完之后 一起激活也可以
到此 插件安装完成、
大概的工作内容：
1. 整理店铺的装修素材
【品牌Logo 114*26 png透明；网站fav icon 10*10px png透明,首页banner图以及产品资料的整理（标题描述价格和图片）】
需要
2. 需要设置的地方
- Wocommence插件
- 产品的上传
- 以及一些细节的设置
3. 需要调整的页面有
- 官网主页的安排和布置 【logo – banner图片-产品-blog设置】
- 以及页面整理
1. Woocommerce 通用设置
进入 Woocommerce — setting 进行设置 这里的大多数信息都只保持默认即可，无需处理
- 店铺地址设置 – 可以不填，也可以根据自己的地址填
- 默认客户地区 – 比如可以设置为美国 【就是你客户所在地】
其他保持默认设置
币种 设置为你需要的币种，比如US美元
如果你设置为英镑，因为英镑不是通用货币，收到paypal提现的时候需要先转美元 再转人民币 多花费一次手续费
设置好 点保存
2. Woocommerce 产品页设置
oocommerce需要你指定一个页面把所有产品都集中再这个页面里面，就像shopify的all product页面一样
比如案例： 这个页面就是此网站的产品页面
步骤：
在 Pages – Add New 这里 添加新的Page
然后设定页面名字为 Products 点 有边的 Publish 按钮发布
在 Products页面下 Shop Page 选择页面为 Products【如果你设置了其他名字，选你设置的名字】
3. Woocommerce 运费设置
运费设置可以根据个人需求，比如对所有配送地区设置19刀以上免运费 ； 默认 收5刀运费；
点 Add Shipping Zone
Zone name 自定义，自己能看明白就可以
Zone Regions 空白
点击 Add Shipping Method 添加 运输方式，
我们现在是在设置对所有配送地区设置19刀以上免运费 ； 不足19刀订单默认收5刀运费；
shipping method有三种方案 Flat Rate / Free Shipping /local Pickup
我们一般只用到 运费价格/ 免运费 这两个选项
先设置 Flat Rate ，选择 Flat Rate 点 Add Shipping Method
点 Edit
保存即可。
保存即可。同样的方法添加 Free Shipping 点 Edit
最低购买金额设置为 19美元 保存即可
4. Woocommerce 付款设置
woocommerce 支持货到付款/ 银行转账 / 支票/ paypal 我们只用paypal
Paypal的选项选 enable 然后点 set Up
这里只需要设置两个地方 ，把邮箱改成你的paypal邮箱即可
然后保存，到此设置完成
4. Advanced 运费设置
至此我们只剩一个地方需要设置。
设置 购物车页面 / 结算页面 / 我的账户页面
和Product页面一样，我们需要新建3个页面对应作为 购物车页面 / 结算页面 / 我的账户页面
新建一个 My Account 页面 内容为 [woocommerce_my_account]
新建一个 Shopping Cart 页面 内容为 [woocommerce_cart]
新建一个 Check Out 页面 内容为[woocommerce_checkout]
添加page页面完成
添加page页面完成回到 Woocommerce — Setting — Advanced 选择对应页面保存即可
支持 Woocommerce的设置完成。
我们选取了几个listing来作为产品模板上传做演示
添加产品步骤
Products – Add New 点 Create Product
价格
往下翻 还有个 Short Description, 这里相当于 Bullet Points的位置
如果需要修改亚马逊产品信息的 可以把UPC填在这里
如果没有UPC使用了豁免的，填关键属性 key attribute
然后右下角找 Product Image, 上传产品主图 和 其他产品主图
然后右下角找 Product Image, 上传产品主图 和 其他产品主图然后点 Publish即可。
这里有很多个性化的设置 比如upsell crosssell等可以自己摸索。
发布之后打开产品页面时这样的，
点击这里可以进入对应的页面
这个时候页面很丑 因为我们还没有对页面做任何设置，但其实大概的雏形已经有了。 我们只需要把有些元素隐藏即可。
这个时候我们回到 Avada – Theme Options – Page Title Bar
把 Page Title bar 设置为 Hide
把 Breadcrumbs / Search Bar Content Display 设置为None
把Page Title Bar Headings 设置为Off保存即可
这个时候的产品页面就变成了这个样子
看起来简洁了很多
第三 页面的调整与设置
我们从上到下 先对主页做一个设置 。
WordPress是博客系统起家，所以默认主页是最新的文章页面，我们需要新建一个页面并设置此页面为主页
Page — Add New 新建一个页面然后我们先做相应的设置，最后再点 Publish
简单起见 我做了个模板 如果对外观没什么要求的，其实简单修改下内容即可
简单起见 我做了个模板 如果对外观没什么要求的，其实简单修改下内容即可下载模板： https://www.junjianyu.com/download/home-code/
在编辑器里面 把源码粘进去
然后点 左上角的 Fusion Builder
点击 Preview Changes 回到前台
除了logo之外，其他的地方可以根据需要做修改，比如
-
- xiaomi tech
- 生死看淡 不服就干 slogn
shop here的链接
当然如果你想改banner图 或者 产品显示数量也是可以的，编辑页面已经是相当可视化，不懂代码的完全可以做些修改
比如 修改”生死看淡不服就干“的文字 回到Home 页面 点击编辑即可修改
如果你想删除 点击垃圾桶也可以随时删除
如果你修改 Shop Here 的链接为我们之前设置的 Product Page
把这个链接粘贴进去保存即可 http://hwq100.com/products/
主页设置好之后 在 Setting 里面做最终的设置
进入 Setting — General
Site Title / Tagline 做一个修改 然后左下角 Save保存
主页设置好之后 在 Setting 里面做最终的设置
进入 Setting — General
Site Title / Tagline 做一个修改 然后左下角 Save保存
这个地方其实是显示在这个位置，我们指向网站的时候，网站的title会显示出来
这个地方其实是显示在这个位置，我们指向网站的时候，网站的title会显示出来
在Setting – Reading 这里把主页设置为静态主页 / Home Page 设置为刚才新建的Home页面 保存
这个时候你会发现 http://hwq100.com/ 显示的就是我们之前的页面了
添加 Products页面到主菜单保存即可
现在网站页面变成这样
Footer这两个地方需要调整 一个是 Footer Widget 1， 一个是Copy Right area
回到 Appearance — Widgets — Footer Widget 1 删除掉里面所有内容
删除掉 然后添加 Text文本进去
删除掉 然后添加 Text文本进去找到 Text 然后 选 Footer Widget 1 ， Add Widget 即可
在Footer 添加对应信息保存
这个时候 Footer Widget 1 的位置就变成了这样
这个时候 Footer Widget 1 的位置就变成了这样
我是Lester. #跨境电商从业者 #技术爱好者 #宅男
15年开始摸索进入跨境电商这个行业。17年开始接触亚马逊。对跨境电商有一定了解。也是技术爱好者，对新鲜的事物有浓厚的兴趣。乐于分享新发现的东西。
个人微信：vkuajing [加我暗号：军舰鱼]
15年开始摸索进入跨境电商这个行业。17年开始接触亚马逊。对跨境电商有一定了解。也是技术爱好者，对新鲜的事物有浓厚的兴趣。乐于分享新发现的东西。
个人微信：vkuajing [加我暗号：军舰鱼]
Latest posts by Lester(走走就停停) (see all)
- 504 gateway time-out nginx 解决方案 - 2020年4月23日
- 加拿大商标自注册教程-2020 - 2020年4月15日
- WordPress的后台登录地址保护 - 2020年4月12日
您好！最近在根据您写帖子一步步建站，写得很详细，适合我这种0基础的人。现在已经到安装AVADA步骤。可以发一份AVADA安装包给我吗？我想先装看看学习一下。谢谢！
加我微信