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.

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

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

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 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 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 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:

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