Your First Website Using WebMatrix
This guide introduces you to WebMatrix, Microsoft's new one-stop website authoring tool that lets you create, edit, and publish websites easily.
This getting-started guide will help you:
- Install WebMatrix.
- Download and install an open-source web application along with its prerequisites.
- Perform the initial set up, including setting database and site administrator credentials.
- Edit some files in the site using the built-in code editor.
- Edit the site's database using the built-in database manager.
- Run a site analysis to look for potential optimizations.
- Prepare to publish your site to a web hosting provider.
WebMatrix, Microsoft's new one-stop web development tool, lets you create, edit, and publish websites with unprecedented ease. There are three main ways to create websites using WebMatrix:
- You can create a website starting with one of the site templates built into WebMatrix.
- You can create a site from scratch by using the WebMatrix editing tools for ASP.NET Web Pages with "Razor" syntax
- You can start with a popular open-source web application from the Microsoft Web Application Gallery.
The Web Application Gallery contains an extensive collection of free open-source applications that you can install directly from within WebMatrix. In this tutorial, you'll install WebMatrix and create a blogging website based on the popular open-source application WordPress.
1. Install WebMatrix
To install WebMatrix, go to the WebMatrix download page and click Install Now. At the security warnings, click Run, and then click Install on the Web Platform Installer page.
On the Web Platform Installation screen, WebMatrix displays a list of additional required components. Click I Accept. The install begins.
2. Launch WebMatrix
After installation, click Start > All Programs> Microsoft WebMatrix > Microsoft WebMatrix.
3. Open the Web Gallery
The WebMatrix Quick Start page offers you a number of ways to create a website. In this tutorial, you'll use the option to create a website based on an existing open-source application.
On the Quick Start page, click Site From Web Gallery.
4. Choose a Web Application
Select WordPress. In the Site Name box, enter "MyNewBlog" and then click Next.
5. Choose the Database Type
Most web applications from the Web Gallery require a database engine (namely, MySQL Server or SQL Server Express). WordPress is only compatible with MySQL. If you don't have MySQL installed already, WebMatrix will help you install it. If you need to do that, click Yes, install it on my machine, and then click Next.
As you install WordPress, you may need to set up three sets of credentials:
- Database administrator credentials for the MySQL database engine that WordPress sets up (also known as "root", or "sa" credentials in the case of SQL Server).
- Database user credentials for the actual MySQL database that WordPress will create for your website.
- A set of administrator credentials for the WordPresswebsite itself.
These will be covered in the steps that follow.
If MySQL is already installed, you can go directly to the Connect a Database to the Application step.
6. Choose a Database Engine Administrator Password
When you install a database engine for the first time, you'll need to enter a password for the database administrator account. The default administrator user name is "root" for MySQL databases and "sa" for SQL Server. Be sure that you remember both the user name and the password you create, because you'll need them for later.
7. Start the Installation
The next screen shows you the application (or applications) to be installed, which includes any other software required by the application (for example, PHP, which is the scripting engine that WordPress requires). The following illustration shows you that both WordPress and PHP will be installed. (The screen shows you the link that it's going to get the software from. You don't need to go to the sites and install the software yourself; WebMatrix will do this for you.)
After you accept the End User License Agreement (EULA), the installation begins.
The time required for the installation will depend on the speed of your Internet connection and the servers that you're downloading from.
Next, you may have to enter some additional database information for the application. Web Gallery applications typically expect you to point them to your local database engine (which you might have just installed). For SQL Express, this is typically .\SQLExpress. For MySQL, it's localhost.
Because WordPress uses MySQL, "localhost" is already filled in for you, as you can see in the following illustration.
Next, in the Database Name box, type MyNewBlogDB. This is the database that will hold your blog contents.
In the Database User Name box, enter MyNewBlogDBUser. In the Database Password box, enter a password.
Next, WordPress requires the MySQL administrator credentials so that it can make database changes. If necessary, scroll down so that the Database Administrator Password box is visible. In the box, enter the password that you remembered from earlier — the password you created for the "root" user.
Note Don't change the administrator user name of "root" in the Database Administrator box.
When you're done, click Next.
When the process finishes, you'll see the following screen. The details listed might differ, depending on what was installed.
By default, your website files, including the files that WordPress installs for you, are located in the folder C:\Users\<YourUserName>\Documents\My Web Sites\MyNewBlog. At this point, you haven't published your site to the web, and you're still working locally on your own computer.
9. Run the Site for the First Time
When the installation is finished, your new website appears in the WebMatrix Site workspace. In the WebMatrix ribbon, click the Run button to launch the site in your browser. This is necessary because most applications in the Web Application Gallery do their final setup steps in the browser.
10. Enter Site Administrator Information
Running applications from the Application Gallery for the first time usually triggers the last phase of the installation. In this case, WordPress asks for the site title and the site administrator credentials.
The site title does not have to match the name of the Site in WebMatrix. Type "My New Blog" (with spaces) for the site title and "MyNewBlogAdmin" for the site administrator username.
Next, provide a password and email address for the site administrator. If you do not provide a password, WordPress will generate one for you.
Finally, to make sure that your blog can be viewed by search engines like Bing and Google, select the Allow my site to appear in search engines check box, and then click Install WordPress (despite the wording, this is not really an installation, as you will see).
11. View the Home Page
If you did not provide credentials in the previous step, a page displays your administrator user name and credentials. After you have made a note of them, click Log In. The following login page appears.
This login page takes you to your site's administrator dashboard. Many Web Gallery applications have similar dashboards. Since you are learning about WebMatrix, you can skip this step for now.
In the upper left corner, click Back to My New Blog.
The default page for the My New Blog website is displayed.
Congratulations — your initial site setup is complete.
Close the browser and return to WebMatrix.
12. Open the Files Workspace
Now you can focus on customizing your website. Let's say you want to use WebMatrix to change the background color of all the headings in the site to make them stand out more. To get started, click the Files workspace selector to open the Files workspace.
13. Open a File
The Files workspace is the area in WebMatrix where you can open and edit files.
In the navigation pane on the left, go to the wp-content > themes > twentyten folder, find the style.css file, and then double-click it to open it. If you like, you can click Word Wrap in the ribbon to make the file contents easier to read. Line numbers are enabled by default, and their positions adjust accordingly when lines wrap.
14. Edit a File
In the ribbon, click Go To Line, enter "34", and click Go To. This moves you into the CSS declaration for all headers globally in the site.
After this line:
Add the following line:
When you're editing CSS rules and you press Enter at the end of an existing line, the WebMatrix IntelliSense feature displays some commonly used options to save you some typing:
When you're finished, click the Save icon in the Quick Access Toolbar.
15. Run the Web Site
Run the website again to see the effects of your change. In the navigation pane, select the top item in the tree, which represents your entire site, and then click Run in the ribbon. (If you forget to select the MyNewBlog node and instead click Run when site.css is selected in the navigation pane, WebMatrix will try to browse to site.css and you'll see an error in the browser.)
In the browser, you see that the background color of all of the headings has changed.
When you're done viewing the change, close the browser. You can modify more files in the wp-content/themes directory to change themes in any way you wish.
16. Open the Databases Workspace
Now you're ready to try changing some of the data on the page. For now, you'll change the "Hello World" post title to something else.
Click the Databases workspace selector.
17. Make a Change in the Application Database
Open the node for the MyNewBlogDB database.
Double-click Tables. In the list of tables, double-click the item called MyNewBlogDB.wp_posts.
In the first row of the table grid, find the column called post_title. Select the cell in the first row, press F2 to switch to editing mode, and then change "Hello world!" to "Welcome to My New Blog!". A pencil icon appears to the left of the row while you're editing it.
To save the change that you made, just click any other row in the table.
18. Test Your Change
In the ribbon, click the Home tab, and then click Run again. The changed greeting appears in the browser.
Of course, it's possible to edit the same information by using the WordPress site administrator dashboard. However, for the purposes of this tutorial, you've made the change directly in the database so that you can become familiar with the Databases workspace.
Close the browser. For now, you're done with the Databases workspace.
19. Open the Reports Workspace
Next, you'll use the WebMatrix Reports feature to analyze your website. The Reports feature suggests changes that can make your site faster and more visible to search engines like Bing and Google.
The Reports workspace has many features, so this tutorial will just show you the basics of how to run an analysis and view the results.
To start, click the Reports workspace selector in WebMatrix.
20. Create a New Report
In the Reports workspace, click New in the ribbon.
21. Name the Report
In the New Report dialog box, enter "My New Blog Report" in the Name box. After you click OK, the analysis begins.
22. View the Results
The results appear in the Reports workspace.
Violations of good search engine optimization practices are categorized as "Information", "Warning", or "Error". To see more information about an issue, click it to expand it.
You can use the slider to filter the amount of information you see. To see only warnings and errors, move the slider to the middle. To see only the errors, move the slider to the right.
In the ribbon, you can also click the Performance, SEO, All, URL, and Issue Type buttons to filter and group the results.
As noted, this brief introduction to the Reports feature can't cover all of its capabilities. To learn more about viewing violations and for examples of how to fix them, see the tutorial Use WebMatrix to optimize your site for search engines (SEO).
23. Prepare to Publish
When you're ready to publish your website on the Internet, click the Publish button in the WebMatrix ribbon.
The first time you publish, the Publish Settings dialog box is displayed. To publish a website, you must have an account with a web hosting provider. If you don't have one yet, you can click Find web hosting.
This displays a web page where you can choose from a selection of hosting providers that are compatible with WebMatrix.
24. Import Your Publishing Settings
After you've set up an account with a hosting provider, the provider will typically send you an email with your user name, server name, and other information that goes into the Publish Settings dialog box.
To save you the extra step of entering this information manually, the provider may also send you a "Profile XML" file (named with the.publishsettings extension) that contains this information. If you get one of these files, all you have to do is click Import publish settings, select the file, and you'll be ready to publish. Otherwise, you can enter the settings manually.
25. Publish Your Site
At this point, you're ready to publish your website. For details about how to do this, see the tutorial How to publish a web application using WebMatrix.
After you've published your site, you might want to make changes to it and republish it. WebMatrix makes it easy for you to download it from your hosting provider, edit it, and publish it again. For information on how to do this, see Download, edit, and republish your website with WebMatrix.
26. Other Ways to Create a Site with WebMatrix
In addition to creating a website based on one of the many applications in the Web Application Gallery, you can also create a website in other ways with WebMatrix:
- Use the built-in site templates. The templates offer either a basic site to get you started (like the Starter Site template) or a purpose-specific site (like the Photo Gallery, Calendar, or Bakery templates). These templates create the basic site for you, and then you modify it as you wish. For more information on creating templates, see Create a website from a WebMatrix site template.
- Create a website yourself. This option requires more effort on your part, but may be the best option if you want to directly control every aspect of your site. One way to get started is by using the Empty Site template. For more information, see Create an ASP.NET website from scratch.
- Create a site from a folder. If you already have Web-site files (such as .html files) in a folder on your computer, you can click Site From Folder on the WebMatrix Quick Start screen. The folder name will be become the name of a new site whose files you now can edit in WebMatrix. Alternatively, in Windows Explorer, you can right-click an existing folder and select Open as a Web Site with Microsoft WebMatrix.
27. Additional Resources
To learn more about WebMatrix, see the following: