How to Use the Personal Site Template for ASP.NET Web Pages

WebMatrix templates get you started with creating a website. Templates help you in these ways:

  • You get a professional-looking website right away that you can use either without any changes or with just a little customizing.
  • The site includes built-in features like a blog feed and photo stream.
  • You can use the template as a learning tool that shows you how to use ASP.NET Web Pages to create real-world sites.

The Personal Site template creates a site that you can use to share information about yourself. You can also display your favorite blog, tweets, and photos from Flickr.

This article walks you through the following:

  • How to create a site from the WebMatrix Personal Site template for ASP.NET Web Pages.
  • An overview of the template contents.
  • Suggestions for tasks to get started with the site that’s created by the template.
  • Notes about some of the features in the site.

Create a site from the Personal Site template

1. In WebMatrix, select File –> New –> Site from Template Gallery.

2. In the ASP.NET category, select Personal Site.

3. In the Site Name box, enter a name and then click Next.

image

Site Contents

When you create a site based on the Personal Site template, your site includes the following features:

  • A consistent layout for all pages on the site.
  • Professional look.
  • A CSS-based layout that automatically reformats pages for devices (like phones) that have limited display are.
  • HTML5 elements, and the Modernizr library in case users visit your site but don’t have browsers that support HTML5.
  • Pages that can display a blog feed, Twitter feed, and Flickr stream. All you need to do is set a few variables to tell the site where to get those feeds.

The following table lists the folders and files that are created from the Personal Site template.

App_Code folder

This folder contains helpers (BlogHelper.cshtml, FileHelper.cshtml, TwitterHelper.cshtml) and utility classes (ContentSource.cs, FeedItem.cs, Flickr.cs) that the site uses to display content.

Note   Not all of the code elements in the App_Code folder as used in the Personal Site template.

App_Data folder

This folder contains data files for components (NuGet packages) that are installed by default by the template.

bin folder

This folder contains the executable files (DLLs, assemblies) that are part of ASP.NET Web Pages. If you install new components (NuGet packages), the executable files for those components are installed in this folder.

Content folder

This folder contains the Site.css file that’s used by the site.

Contents folder

This folder contains files that display actual content on the site.

· _Blog.cshtml displays a blog feed

· _Photos.cshtml displays a Flickr photo stream

· _Twitter.cshtml displays a Twitter feed

See the instructions below for information on how to configure these pages to display information.

images folder

This folder contains graphics that are referenced in the site layout.

Layouts folder

This folder contains the _SiteLayout.cshtml and _SiteLayout.Mobile.cshtml files that define how the site is laid out. (The .Mobile version of the file is used if someone requests pages from a mobile device.)

Scripts folder

This folder contains jQuery libraries. The site uses jQuery files to support HTML5 elements.

Note   Not all of the jQuery libraries are used in the Personal Site template.

_AppStart.cshtml file

This page contains initialization code that runs before any page in the site runs. In the Personal Site template, the file contains code that defines the links (Blog, Twitter, Photos) that appear on the main page.

Default.cshtml file

This is the site’s home page, which is displayed if users go to your site and don’t request a different page.

robots.txt file

This file is used by search-engine crawlers to determine what files in the site to index. For more information, see The Web Robots Pages.

Note Search-engine crawlers usually read and honor the robots.txt file, but the file is not designed as a security measure. Do not use the robots.txt file as a way to try to hide files.

web.config file

This file contains configuration settings for the site.

Getting Started Tasks

After creating a site based on the Personal Site template, you typically perform the tasks that are described in this section.

Changing the main text

The main page displays placeholder text, which you’ll want to change.

  1. Open the Default.cshtml page in the root folder and change the content to whatever you want to have as your welcome message.
  2. Open the Layouts/_SiteLayout.cshtml page.
  3. Change the text of the <p class="title"> element from “Your Name” to whatever you want to use as the heading for your site.
  4. Find the text that starts with “Let’s write a bit …” and change that.
  5. Open the Layouts/_SiteLayout.mobile.cshtml page and make similar changes. Note that this page is used to display your site for mobile devices, so you have less room to work with.

Adding a blog feed

  1. Open the Contents/_Blog.cshtml page.
  2. Set the blogUrl variable at the top of the page to the feed of a blog. (The blog feed must be in RSS 2.0 or Atom 1.0 format.)

Adding a Twitter feed

  1. Open the Contents/_Twitter.cshtml page.
  2. Set the screenName variable at the top of the page to your Twitter name.

Adding a Flickr photo stream

To display photos, you have to have a Yahoo account and you need to get a Flickr API key. If you do not have a Yahoo account, go to www.yahoo.com and sign up for an account.

To get a Flickr API key, do the following:

  1. Go to the Flickr API Services page.
  2. Click the Create an App link at the top.
  3. Click the Request an API key link.
  4. Click the Apply for a Non-Commercial Key option.
  5. Fill in information for the app name and description. The details are not critical. (You’re not really creating an app; you’re using an app that’s already in the site.)
  6. Click Submit. Flickr generates a key and a secret. Copy these value and keep them someplace safe.

Note   The exact steps on the Flickr website for obtaining a key change from time to time; the steps listed above might not match the Flickr site exactly. If there's a discrepancy, search for "API key" on the Flickr development site.

When you’ve got a Flickr key, do this:

  1. Open the Contents/_Photos.cshtml page.
  2. Set the flickrKey variable to your Flickr key, and set the flickrUserName variable to your Flickr user name.

Adding content to the site

You can add content that’s displayed in the content area of the main page.

1. In the Contents folder (not the Content folder), create a new page. When you name the page, add an underscore (_) as a prefix. This prevents the page from being requested directly, and makes sure it is displayed only as part of the main page.

2. Remove everything in the new page. Put your new static content inside a <p> element.

<p>

You page content here.

</p>

3. Open the _AppStart.cshtml page.

4. Add an entry for your new page like the one that’s highlighted:

@{
    App.CacheDuration = 30;     // cache content pages for 30 minutes
 
    // register for main contents which will appear as tabs on the navigation bar
    App.ContentPages = new[] {
        new ContentSource("Blog", "My Blog", "~/Contents/_Blog.cshtml", false),
        new ContentSource("Twitter", "My Tweets", "~/Contents/_Twitter.cshtml", false),
        new ContentSource("Photos", "My Photos", "~/Contents/_Photos.cshtml", false),
        new ContentSource("My New Page", "My Page", "~/Contents/_MyNewPage.cshtml", false)
     };
}

Note that you have to add a comma after the entry for the _Photos.cshtml page.

Publishing the site

After you have finished customizing the site, you can publish it so that others can see it. For details, see Introducing ASP.NET Web Pages 2 - Publishing a Site by Using WebMatrix. (Although that article is the last tutorial in a tutorial set, you can follow the instructions provided there.)

Updating packages in the template

The site template includes NuGet packages that are already installed in your site. Occasionally these packages are updated. To see if there are updates, do this:

1. In WebMatrix, open your site and go to the Files workspace.

2. In the ribbon, click the Gallery button.

3. In the NuGet Gallery dialog box, click Installed.

Template Notes

  • HTML5. The _SiteLayout.cshtml page and the content pages (for example, _Blog.cshtml) use HTML5 elements like <header> and <nav>. Because many browsers don’t support HTML5 yet, the site layout pages include a link to the Modernizr library, which provides HTML5 support for older browsers.
  • Site flow. The main page is Default.cshtml. When you click any of the links for content (Blog, Twitter, etc.), it invokes the ContentPage.cshtml page and passes the name of the content to display. The name is a lookup into the App.ContentPages array that’s defined in the _AppStart.cshtml page. The array in turn contains instances of the ContentSource class, which is defined in the App_Code folder.
  • Semantic URLs. The site folders are organized in a way that lets the site use URLs in a semantic way. For example, you can display site content using URLs like the following:

/ContentPage/Blog

/ContentPage/Twitter

/ContentPage/Photos

  • Layouts and mobile devices. The template illustrates how to create a different layout for desktop browsers and for mobile browsers. The default layout is created using the _SiteLayout.cshtml and Site.css files. However, if a page in the site is requested from a mobile device, the site automatically uses _SiteLayout.Mobile.cshtml and Site.mobile.css. For more information, see Rendering ASP.NET Web Pages (Razor) Sites for Mobile Devices.

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!