How to Build Your Own Website

What?
This guide we will help you learn how to build and manage your own website using Stanford Sites. This self-service
tool is available to current faculty, staff, and students to use free of charge and requires little technical experience. In
this example, we will show you how to create a site for your research interests.
This is the main control panel when you log on as an admin.

Press the home icon to

get to the home page

Step 1: Request your site

To request a new site, login to Stanford Sites main admin page by clicking this URL: sites.stanford.edu/drupal/
admin

The main admin page will show a list of existing sites for all AFS spaces that you have admin access to. To
create your personal site (you can only have one per user), find and click the request link. Wait for an email
confirming the site is ready and then follow the next steps (Fig. 1A).

Fig. 1A

Confirmation email

When the site is ready, you will receive an email from Stanford Sites.

Follow the install link in the email to finish installing your site.

The URL for your personal site will follow this format: people.stanford.edu/SUNetID/

Step 2: Setting up your site

Your New Site & the Quick Steps Menu

Click on the link under your username from the Stanford Sites admin page to see your newly created site
(Fig. 2A).

Fig. 2A

A Quick Steps menu will be the first thing you see on the page (Fig. 2B). These are short cuts to access
functions in Drupal. They can also be found in the control panel.

Login with your SUNetID if you havent already done so.

You have the option to remove this menu block from your homepage after your site is completed.

Fig. 2B

Modules - used to create individual pages in Drupal

Click on the Modules tab on the control panel at the top of the page.

You can also get to this page by clicking the Add functionality and features link from your Quick Steps
menu. By default, almost all of the necessary modules have already been turned on (Fig. 2C).

Scroll down the list and turn the file entity module ON. This will allow you to add files to the server.

Click Save configuration.

Fig. 2C

Step 3: Customizing your sites appearance

Click the home icon

on the control panel
Change your sites name and info

Click the second menu item on the Quick Steps menu (Fig. 2D).


Fig. 2D

Provide a site name and email address (Fig. 2E). Optional: add a slogan.

Fig. 2E

Click Save Configuration.

Edit the look and feel of your site

Click the Edit the look and feel of your site link from the Quick Steps menu (Fig. 3A).

Fig. 3A

Under the Settings tab at the top, click Stanford Light from the styles listed (Fig. 3B).

Fig. 3B

To add a custom logo to your front page,

upload your file under Logo Image Settings
(Fig. 3C).

Fig. 3C

To add your own background image to your

site, upload your file under Body Background
(Fig. 3D).

Fig. 3D

To add your own header background image,

upload your file under Header Background
(Fig. 3E).

Fig. 3E

Click Save Configuration.

Step 4A: Your home page creating blocks

Start by creating blocks on your home page in order to add text or images to your site (you can
rearrange these blocks on the page however you like ).

On the control panel, hover over Structure then Blocks and click Add block. You can add,
rearrange, or disable blocks on this admin page (Fig. 4A).

Fig. 4A

To add a block, click the link Add block shown in Fig. 4B.

Fig. 4B

Enter the title, description, and add your content to the block body. You can edit the format and style
of text by using the toolbar (Fig. 4C).

Note: to insert images, go to the Inserting images and other file types in a block on pg. 9 for more
details.

Fig. 4C

You can specify where this block will be displayed under Region Settings. Under Stanford Light
(default theme), select your desired location from the list of options (Fig. 4D).

Fig. 4D

The regions where each block will be displayed are outlined below (Fig. 4E).

Fig. 4E

You can change where your block is shown by clicking the Pages tab under Visibility Settings (Fig.
4F).

Fig. 4F

Note: If you want this block to appear only on the front page, type <front> in the textbox below.

Click Save block.

Click the home icon on the control panel to return to the front page.

To reedit, hover over the specific block until you see a dashed box appear. Click the gear icon and
configure the block accordingly.

Step 4B: Creating new tabs & pages

On the control panel, hover over Content then Add Content and click Basic page to add a new
page (Fig. 5A).

Fig. 5A

Give your new page a title and add your content (e.g. your bio)(Fig. 5B).

Fig. 5B

Before saving, scroll down to the gray menu bar at the bottom of the page and click
Menu settings (Fig. 5C).

Note: If you want to create a new menu tab for this page, check the box Provide a menu link. Select
the Parent item option <Main menu> from the list and designate a weight (e.g. home = 0, bio = 1,
research and scholarship = 2). The weight determines the sequential order of your menu links. Menu
links with smaller numbers are displayed before links with larger numbers.

Fig. 5C

Next, select Publishing options on the gray menu bar and uncheck Promoted to front page
(Fig. 5D). This will prevent all your published pages from congregating on the home page.

Fig. 5D

Click Save to publish your new page.

Click the home icon on the control panel to return to your home page.

Your tab bar will look like this after creating multiple pages with corresponding tabs (Fig. 5E).

Fig. 5E

Step 5: Inserting images and other file types in a block

You will need to add your file to the server directory first and obtain its URL link.

Hover over the Content tab in the control panel and click Files (Fig. 6A).

Fig. 6A

Click the +Add file link and follow the prompt (Fig. 6B).

Fig. 6B

Choose your file and click Upload (Fig. 6C). Click Next.

Fig. 6C

Under Destination, select Public local files served by the webserver (Fig. 6D). Click Next.

Fig. 6D

Give your file a concise name and provide Alternative text (Fig. 6E). Alt text is used by screen
readers and search engines when the image cannot be loaded.

Click Save.

Fig. 6E

Return to the main Files page. You will see your recently uploaded file in the table below (Fig. 6F).

Fig. 6F

Click the link to your desired file under the Title column (Fig. 6G).

Fig. 6G

You will be brought to a page where your file is housed in (note: these pages are hidden to viewers).

Hover over your file and right click. Choose Open image in new tab. Copy the files URL from the new
tab (Fig. 6H).

Fig. 6H

Note: To save time, the URL link to any image or file housed in your directory will follow this format:
people.stanford.edu/yourSUNetID/sites/default/files/imageName.fileType

Return to the block where you want to insert your image by clicking the home icon on the control
panel. Hover over the block and click the gear icon to re-edit .

Click the picture icon in the toolbar and paste the URL when the Image Properties window pops
up (Fig. 6I). You can adjust the size of your image by entering a new width or length.
Toolbar --->

Figure 6I

Click OK when you are finished.

Note: To insert links to other file types like PDFs or Word docs, follow the same process outlined
above to obtain the URL link. However, instead of clicking the picture icon, choose the hyperlink icon
and paste the URL as usual.

For an example of a completed site, check out:

https://people.stanford.edu/atan105/

Further Resources

Other pages and video tutorials here in the User Guide for Stanford Sites.

Complete list of Stanford Sites features and benefits.

If you have a problem with the install process or your installed website, please submit a HelpSU
Request.

Stanford Web Services staff recommend the book Using Drupal for getting familiar with building a
site. Stanford has free online access to all OReilly books. See searchworks.stanford.edu/view/7834607

For help with Drupal or content issues, join and consult the Stanford Drupallers Email List.

Drupal Training Videos: learndrupal.stanford.edu

TechCommons: techcommons.stanford.edu