CINXE.COM
Editing a page
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Editing a page</title> <meta name="description" content="Guides, case studies and resources for government & civil society on the "what, why & how" of open data. "> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="google-site-verification" content="U6RmQ0BoQ9f1Omog3Mnas-Yd1At38pTDZbM1AtnOpnc" /> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <!-- Place favicon.ico in the root directory --> <link rel="stylesheet" href="//a.okfn.org/html/oki/panel/assets/css/frontend.css"> <link rel="stylesheet" href="/css/main.css"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel='stylesheet' type='text/css'> <link rel="canonical" href="http://opendatahandbook.org/contribute/editing/"> <script src="/js/vendor/modernizr-2.8.3.min.js"></script> <script> var okiConsent = { analyticsTrackingID: 'UA-8271754-28' } </script> <script src="https://a.okfn.org/html/oki/consent/assets/js/consent.js"></script> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div id="ok-panel" class="closed"><div class="container"><iframe src="//a.okfn.org/html/oki/panel/panel.html" scrolling="no"></iframe></div></div> <div> <div id="ok-panel-wrapper"> <a class="white ok-ribbon" href="https://okfn.org/"><img src="//a.okfn.org/html/oki/panel/assets/images/oki-ribbon.png" alt="Open Knowledge International"></a> </div> <div> <header class="site-header"> <a href="#menu" class="show-menu"><span class="text">Open the menu</span></a> <a class="site-title" href="/">Open Data Handbook</a> </header> <nav id="menu"> <ul> <li> <a href="/">Home</a> </li> <li > <a href="/guide/en/introduction/">Guide</a> <ul> <!-- start navigation for guide section --> <li > <a href="/guide/en/introduction/">Introduction</a> <span class="subsections"> <a href="#target-audience">Target Audience</a> <a href="#credits">Credits</a> </span> </li> <li > <a href="/guide/en/why-open-data/">Why Open Data?</a> </li> <li > <a href="/guide/en/what-is-open-data/">What is Open Data?</a> </li> <li > <a href="/guide/en/how-to-open-up-data/">How to Open Up Data</a> </li> <li > <a href="/guide/en/following-up/">So I've Opened Up Some Data, Now What? </a> </li> <li > <a href="/guide/en/events/">Make data social</a> </li> <li > <a href="/guide/en/appendices/">Appendices</a> </li> <!-- start navigation for glossary section --> <li> <a href="/glossary/en/">Glossary</a> </li> <!-- end navigation for glossary section --> <!-- end navigation for guide section --> </ul> </li> <!-- start navigation for value stories section --> <li> <a href="/value-stories/en/">Value Stories</a> </li> <!-- end navigation for value stories section --> <!-- start navigation for resources section --> <li> <a href="/resources/">Resources</a> </li> <!-- end navigation for resources section --> <!-- start navigation for apps section --> <li class="apps-menu"> <a href="/solutions/en/">Solutions</a> <ul class="app-sub-menu"> <li class="search"> <input type="search" placeholder="Search" class="quicksearch"> </li> <li class="problems filter active"> <a>Problems</a> <span class="filter-items"> <a data-filter=".selector-problem-reusefederatedtools" data-pid=".problem-reusefederatedtools">(Re)use federated tools</a> <a data-filter=".selector-problem-assessholisticmetrics" data-pid=".problem-assessholisticmetrics">Assess holistic metrics</a> <a data-filter=".selector-problem-categoriseopennessofdata" data-pid=".problem-categoriseopennessofdata">Categorise openness of data</a> <a data-filter=".selector-problem-crossagencystrategy" data-pid=".problem-crossagencystrategy">Cross Agency strategy</a> <a data-filter=".selector-problem-developanopendatapublicationplan" data-pid=".problem-developanopendatapublicationplan">Develop an Open Data Publication Plan</a> <a data-filter=".selector-problem-developdatasetcriteria" data-pid=".problem-developdatasetcriteria">Develop dataset criteria</a> <a data-filter=".selector-problem-enablefeedbackchannelsforimprovingdataquality" data-pid=".problem-enablefeedbackchannelsforimprovingdataquality">Enable feedback channels for improving data quality</a> <a data-filter=".selector-problem-enablequalityassessmentofopendata" data-pid=".problem-enablequalityassessmentofopendata">Enable quality assessment of open data</a> <a data-filter=".selector-problem-encouragecrowdsourcingaroundpsi" data-pid=".problem-encouragecrowdsourcingaroundpsi">Encourage crowdsourcing around PSI</a> <a data-filter=".selector-problem-establishopengovernmentportal" data-pid=".problem-establishopengovernmentportal">Establish Open Government Portal</a> <a data-filter=".selector-problem-establishanopendataecosystem" data-pid=".problem-establishanopendataecosystem">Establish an Open Data Ecosystem</a> <a data-filter=".selector-problem-identifywhatyoualreadypublish" data-pid=".problem-identifywhatyoualreadypublish">Identify what you already publish</a> <a data-filter=".selector-problem-influxofhousingpriceincreases" data-pid=".problem-influxofhousingpriceincreases">Influx of Housing Price Increases</a> <a data-filter=".selector-problem-internationalaidandtransparency" data-pid=".problem-internationalaidandtransparency">International Aid & Transparency</a> <a data-filter=".selector-problem-opendatabusinessmodels" data-pid=".problem-opendatabusinessmodels">Open Data Business Models</a> <a data-filter=".selector-problem-openuppublictransportdata" data-pid=".problem-openuppublictransportdata">Open Up Public Transport Data</a> <a data-filter=".selector-problem-providepsiatzerocharge" data-pid=".problem-providepsiatzerocharge">Provide PSI at zero charge</a> <a data-filter=".selector-problem-publishstatisticaldatainlinkeddataformat" data-pid=".problem-publishstatisticaldatainlinkeddataformat">Publish Statistical Data In Linked Data Format</a> <a data-filter=".selector-problem-publishoverviewofmanageddata" data-pid=".problem-publishoverviewofmanageddata">Publish overview of managed data</a> <a data-filter=".selector-problem-ride-sharingandpublictransit" data-pid=".problem-ride-sharingandpublictransit">Ride-sharing and Public Transit</a> <a data-filter=".selector-problem-standardsforgeospatialdata" data-pid=".problem-standardsforgeospatialdata">Standards for Geospatial Data</a> <a data-filter=".selector-problem-trackingmodernwarfare" data-pid=".problem-trackingmodernwarfare">Tracking Modern Warfare</a> <a data-filter=".selector-problem-unveilingincarcerationrates" data-pid=".problem-unveilingincarcerationrates">Unveiling Incarceration Rates</a> </span> </li> <li class="filter"> <a>Themes</a> <span class="filter-items"> <a data-filter=".selector-theme-internationalconflict"> International Conflict</a> <a data-filter=".selector-theme-transport"> Transport</a> <a data-filter=".selector-theme-civilconflict">Civil Conflict</a> <a data-filter=".selector-theme-gentrification">Gentrification</a> <a data-filter=".selector-theme-health">Health</a> <a data-filter=".selector-theme-internationalaid">International Aid</a> <a data-filter=".selector-theme-modernwarfare">Modern Warfare</a> <a data-filter=".selector-theme-prisonpolicy">Prison Policy</a> <a data-filter=".selector-theme-sharepsi">Share PSI</a> <a data-filter=".selector-theme-transport">Transport</a> </span> </li> <li class="filter"> <a>Tags</a> <span class="filter-items"> <a data-filter=".selector-tag-civilconflict"> Civil Conflict</a> <a data-filter=".selector-tag-crime"> Crime</a> <a data-filter=".selector-tag-development"> Development</a> <a data-filter=".selector-tag-drones"> Drones</a> <a data-filter=".selector-tag-e-government"> E-Government</a> <a data-filter=".selector-tag-foreignaffairs"> Foreign Affairs</a> <a data-filter=".selector-tag-housingprices"> Housing Prices</a> <a data-filter=".selector-tag-humanrights"> Human Rights</a> <a data-filter=".selector-tag-incarcerationrates"> Incarceration Rates</a> <a data-filter=".selector-tag-internaldisplacement"> Internal Displacement</a> <a data-filter=".selector-tag-internationalconflict"> International Conflict</a> <a data-filter=".selector-tag-internationalsecurity"> International Security</a> <a data-filter=".selector-tag-metro"> Metro</a> <a data-filter=".selector-tag-sharepsi"> Share PSI</a> <a data-filter=".selector-tag-transparency"> Transparency</a> <a data-filter=".selector-tag-corruption"> corruption</a> <a data-filter=".selector-tag-development"> development</a> <a data-filter=".selector-tag-e-government"> e-government</a> <a data-filter=".selector-tag-foreignpolicy"> foreign policy</a> <a data-filter=".selector-tag-metro"> metro</a> <a data-filter=".selector-tag-publictransit"> public transit</a> <a data-filter=".selector-tag-ride-sharing"> ride-sharing</a> <a data-filter=".selector-tag-gentrification">Gentrification</a> <a data-filter=".selector-tag-internationalaid">International Aid</a> <a data-filter=".selector-tag-modernwarfare">Modern Warfare</a> <a data-filter=".selector-tag-prisonpolicy">Prison Policy</a> <a data-filter=".selector-tag-taxi">Taxi</a> <a data-filter=".selector-tag-transparency">Transparency</a> <a data-filter=".selector-tag-insurance">insurance</a> <a data-filter=".selector-tag-internationalaid">international aid</a> <a data-filter=".selector-tag-transparency">transparency</a> </span> </li> </ul> </li> <!-- start navigation for contribute section --> <li class="Selected"> <a href="/contribute/">Contribute</a> <ul> <li > <a href="/contribute/">Contributing To The Handbook</a> </li> <li > <a href="/contribute/adding/">Adding A Page</a> </li> <li class="Selected"> <a href="/contribute/editing/">Editing A Page</a> </li> <li > <a href="/contribute/add-term/">Adding A Term To The Glossary</a> </li> <li > <a href="/contribute/add-resource/">Adding A Resource To The Library</a> </li> <li > <a href="/contribute/translate-guide/">Translating The Guide</a> </li> <li > <a href="/contribute/translate-glossary/">Translating The Glossary</a> </li> <li > <a href="/contribute/markdown-examples/">Markdown Examples</a> </li> </ul> </li> <!-- end navigation for contribute section --> <li> <a href="/credits/">Credits</a> </li> </ul> </nav> <div class="page-content"> <div class="docs"> <article class="post-content"> <a href="/contribute/" class="pre-header">contribute</a> <h1 class="post-title">Editing a page</h1> <div class="author">Written by <ul> <li>Sam Smith</li> </ul> </div> <p class="lead">If you haven't done so already, the first thing you need to do is head over to <a href="https://github.com/" rel="external">Github</a> and create your free account.</p> <p>There are three steps to editing a page. First you need to locate the page you wish to edit. There are a couple of ways to do this. <strong>Method A</strong> is probably the simplest, and most likely way you’ll do it. <strong>Method B</strong> will serve as a primer for the next section: <em>Adding a page</em>.</p> <h2 id="1-locate-the-page">1. Locate the page</h2> <h4 id="method-a-browse-the-website">Method A: Browse the website</h4> <p>While reading any section of the Handbook you’ll see a button with the paper icon <code class="icon-paper"><span>[paper icon]</span> Improve this page</code> in the right side or bottom of the page, depending on the size of the screen. Hovering over it then clicking an ‘<em>Edit on Github</em>’ button will take you directly to an editable version of that page. Easy huh?</p> <div class="note"> <h6>Note</h6> <p>When the editable page opens it will (most likely) contain a message saying <em>"You need to fork this repository to propose changes."</em>. If this is your first edit to The Open Data Handbook there will be a '<em>Fork this repository and propose changes</em>' button. This is normal and part of the workflow. Click the button to start editing.</p> </div> <h4 id="method-b-browse-the-github-repository">Method B: Browse the Github repository</h4> <p>The entire file structure of this site can be browsed on Github. For example, the root of the site is <a href="https://github.com/okfn/opendatahandbook">here</a>, and the English language guide section of the Handbook is <a href="https://github.com/okfn/opendatahandbook/tree/gh-pages/guide/en">here</a>. It’s helpful to understand that the page URLs correspond to the file structure you see here. So, if you wanted to edit the Open Data Guide introduction page, given that it’s URL is <code>http://opendatahandbook.org/<strong>guide</strong>/<strong>en</strong>/<strong>introduction</strong>/</code> we know this file can be found in the <code><strong>guide</strong>/<strong>en</strong>/<strong>introduction</strong></code> directory with the filename <code><strong>index</strong>.md</code> Following these links you should see a preview of the page you wish to edit. From here click the edit icon <code class="icon-pencil"><span>[pencil icon]</span></code> to start editing.</p> <div class="note"> <h6>Pro Tip!</h6> <p>Press <code>t</code> on any tree or blob page to launch the file finder.</p> </div> <h2 id="2-make-your-changes">2. Make your changes</h2> <p>With the editable content in front of you, you’re probably either thinking “great, let’s get editing”, or “hang on, this looks a bit weird”. In case it’s the latter, let’s have a closer look. The first thing to recognise is the ‘Front Matter’, which will look like this:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>--- title: Introduction --- </code></pre></div></div> <p>The front matter must be the first thing in the file, must adhere to the above syntax, and must be set between triple-dashed lines. Numerous variables can be set here, but you’ll usually just need <code class="highlighter-rouge">title</code>. The title set here will be used as the main heading for the page, as well as in the browser tab.</p> <p>The other important thing to recognise is the Markdown syntax. For example, where you see a line commencing with two hash marks:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>## Do you know exactly how much of your tax money is spent on street lights? </code></pre></div></div> <p>This is the Markdown way of creating a level two heading. On the site it will be outputted like so:</p> <h2 id="do-you-know-exactly-how-much-of-your-tax-money-is-spent-on-street-lights">Do you know exactly how much of your tax money is spent on street lights?</h2> <p>Another common formatting requirement is bullet points, or lists. These are achieved in Markdown by using asterisks, like so:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* civil servants * journalists * politicians </code></pre></div></div> <p>giving you:</p> <ul> <li>civil servants</li> <li>journalists</li> <li>politicians</li> </ul> <p>Links are created like so:</p> <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Give your data a home at the [Datahub](http://datahub.io/). </code></pre></div></div> <p>result:</p> <p>Give your data a home at the <a href="http://datahub.io/">Datahub</a>.</p> <div class="note"> <h6>Pro Tip!</h6> <p>To get a link to a specific heading on this site, hover over it then click the section icon <code class="icon-section"><span>[section icon]</span></code>. This will show you the URL.</p> </div> <p>More Markdown examples can be found <a href="/contribute/markdown-examples/">here</a>, and a more detailed overview <a href="http://daringfireball.net/projects/markdown/syntax">here</a>.</p> <p>If you are unsure of your markup while editing, you can switch to the preview tab <code class="icon-eye"><span>[eye icon]</span> Preview changes</code> to see how it will be rendered.</p> <div class="note"> <h6>Note</h6> <p>The Github previews will look stylistically different from the live site. A different font will be used for example.</p> </div> <p>Once you are happy with your changes, add a summary of what you’ve changed in the field below the editable text. Then click ‘<em>Propose file change</em>’.</p> <h2 id="3-make-a-pull-request">3. Make a pull request</h2> <p>You will now be presented with a ‘pull request’ form. So far, the changes you have made are to your own copy, or fork of the handbook. A pull request simply sends a request to the authors/maintainers of the live handbook, asking them to include your changes - and put them live! Add any comments you have for the handbook team, then press ‘<em>Create pull request</em>’.</p> <p>Your work here is done :) If you need to make related changes though, any new commits pushed to your branch will automatically be added to the pull request.</p> </article> </div> <div class="page-tools"> <ul> <li class="edit tooltip-item"> Improve this page <span class="tooltip"> <a href="https://github.com/okfn/opendatahandbook/edit/master/contribute/editing.md" class="github" rel="external">Edit on Github</a> <a href="/contribute/" target="_blank">Help and instructions</a> </span> </li> <li class="donate tooltip-item"> Donate <span class="tooltip"> <p>If you have found this useful and would like to support our work please consider making a small donation.</p> <form method="post" action="https://www.paypal.com/cgi-bin/webscr" target="_blank"> <select name="currency_code"> <option value="USD">US Dollar $</option> <option value="EUR">Euro €</option> <option value="GBP">UK £</option> <option value="AUD">Australian Dollar</option> <option value="CAD">Canadian Dollar</option> <option value="CZK">Czech Koruna</option> <option value="DKK">Danish Krone</option> <option value="HKD">Hong Kong Dollar</option> <option value="HUF">Hungarian Forint</option> <option value="JPY">Japanese Yen</option> <option value="NOK">Norwegian Krone</option> <option value="NZD">New Zealand Dollar</option> <option value="PLN">Polish Zloty</option> <option value="SEK">Swedish Krona</option> <option value="SGD">Singapore Dollar</option> <option value="CHF">Swiss Franc</option> </select> <input type="text" value="2.00" name="amount"> <input type="submit" value="Donate via PayPal" name="submit"> <img width="1" border="0" height="1" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" alt=""> <img width="1" border="0" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" alt=""> <input type="hidden" value="_xclick" name="cmd"> <input type="hidden" value="admin@okfn.org" name="business"> <input type="hidden" value="Open Data Handbook Donation to Open Knowledge" name="item_name"> </form> </span> </li> <li class="share tooltip-item"> Share <span class="tooltip"> <a href="https://www.facebook.com/sharer/sharer.php?u=http://opendatahandbook.org/contribute/editing/" class="facebook" rel="external">Share on Facebook</a> <a href="https://twitter.com/home?status=Editing a page: http://opendatahandbook.org/contribute/editing/" class="twitter" rel="external">Share on Twitter</a> </span> </li> </ul> </div> </div> <footer class="site-footer"> <div> <div class="primary"> <a href="https://okfn.org/" rel="external"><img src="//a.okfn.org/img/oki/landscape-grey-468x122.png" width="123" height="32" alt="Open Knowledge International"></a> <div class="supporters"> <h6>Supported by</h6> <a href="https://www.shuttleworthfoundation.org/" rel="external"><img src="/img/supporters/shuttleworth-footer.png" alt="Shuttleworth Foundation"></a> <a href="http://www.worldbank.org/" rel="external"><img src="/img/supporters/worldbank-footer.png" alt="The World Bank"></a> <a href="http://od4d.net/" rel="external"><img src="/img/supporters/od4d-footer.png" alt="OD4D"></a> </div> </div> <div class="secondary"> <ul> <li><a href="/contribute/">Contribute</a></li> <li><a href="https://okfn.org/terms-of-use/" rel="external">Terms of use</a></li> <li><a href="https://okfn.org/privacy-policy/" rel="external">Privacy policy</a></li> <li class="button"><a href="http://opendefinition.org/" rel="external"><img src="/img/open-content.svg" width="80" height="15" alt="Open Content"/></a></li> </ul> </div> <div class="tertiary"> <div> <h6>Related Projects</h6> <ul> <li><a href="http://opengovernmentdata.org/">OpenGovernmentData.org</a></li> <li><a href="http://datahub.io/">The DataHub</a></li> <li><a href="http://dataportals.org/">DataPortals.org</a></li> <li><a href="http://openspending.org/">OpenSpending.org</a></li> <li><a href="http://schoolofdata.org/">SchoolOfData.org</a></li> <li><a href="http://opendefinition.org/">OpenDefinition.org</a></li> <li><a href="http://okfn.org/opendata/">Introducing Open Data</a></li> </ul> </div> <ul class="icons"> <li class="donate"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=admin@okfn.org&lc=GB&item_name=Open Data Handbook%20Donation%20to%20Open%20Knowledge&no_note=0¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHostedGuest" rel="external"><span>Donate</span></a></li> <li class="discuss"><a href="https://discuss.okfn.org/c/open-data-handbook" rel="external"><span>Contact</span></a></li> <li class="source"><a href="https://github.com/okfn/opendatahandbook" rel="external"><span class="text">Source</span></a></li> </ul> </div> </div> </footer> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="/js/plugins.js"></script> <script src="/js/main.js"></script> <script src="//a.okfn.org/html/oki/panel/assets/js/frontend.js"></script> <script> // Append headings with link to ID function headingLink(heading) { $.each($(heading), function() { var headingID = $(this).attr('id'); var headingURL = '#' + headingID; if(typeof headingID != 'undefined') { $( this ).append( '<span class="headerlink"><a class="icon-section"></a><span class="url"><a class="icon-link" href="'+headingURL+'"></a>http://opendatahandbook.org/contribute/editing/'+headingURL+'</span></span>' ); } }); } headingLink('.post h1'); headingLink('.post h2'); headingLink('.post h3'); headingLink('.post h4'); headingLink('.post h5'); headingLink('.post h6'); $(".headerlink a").click(function() { $(this).parent('.headerlink').toggleClass("active"); }); </script> </body> </html>