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.

Overview

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.

image01

On the Web Platform Installation screen, WebMatrix displays a list of additional required components. Click I Accept. The install begins.

image02

2. Launch WebMatrix

After installation, click Start > All Programs> Microsoft WebMatrix > Microsoft WebMatrix.

image03

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.

image04

4. Choose a Web Application

Select WordPress. In the Site Name box, enter "MyNewBlog" and then click Next.

image05

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.

image06

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 WordPress website 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.

image07

Click Next.

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.)

image08

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.

8. Connect a Database to the Application

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.

image09

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.

image11

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.

Click OK.

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.

image12

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 user name.

Next, provide a password and email address for the site administrator. If you do not provide a password, WordPress will generate one for you.

image13

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.

image14

The default page for the My New Blog website is displayed.

image15

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.

image16

13. Open a File

The Files workspace is the area in WebMatrix where you can open and edit files.

image17

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.

image18

After this line:

font-weight: normal;

Add the following line:

background-color: yellow;

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:

image19

When you're finished, click the Save icon in the Quick Access Toolbar.

image20

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.)

image21

In the browser, you see that the background color of all of the headings has changed.

image22

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.

image23

17. Make a Change in the Application Database

Open the node for the MyNewBlogDB database.

image24

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.

image25

18. Test Your Change

In the ribbon, click the Home tab, and then click Run again. The changed greeting appears in the browser.

image26

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.

image27

20. Create a New Report

In the Reports workspace, click New in the ribbon.

image28

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.

image29

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.

image30

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.

image31

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.

image32

This displays a web page where you can choose from a selection of hosting providers that are compatible with WebMatrix.

image33

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.

image34

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:

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!