Your First Website Using WebMatrixThis 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.

OverviewWebMatrix, 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 WebMatrixTo 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 WebMatrixAfter installation, click Start > All Programs> Microsoft WebMatrix > Microsoft WebMatrix.

3. Open the Web GalleryThe 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 ApplicationSelect WordPress. In the Site Name box, enter "MyNewBlog" and then click Next.

5. Choose the Database TypeMost 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 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 PasswordWhen 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.

Click Next.

7. Start the InstallationThe 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.

8. Connect a Database to the ApplicationNext, 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.

Click OK.

9. Run the Site for the First TimeWhen 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 InformationRunning 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.

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 enginescheck box, and then click Install WordPress (despite the wording, this is not really an

installation, as you will see).

11. View the Home PageIf 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 WorkspaceNow 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 FileThe 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 FileIn 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:

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:

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

15. Run the Web SiteRun 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.