Ошибка 404 гитхаб

If you’re encountering some oddities in the API, here’s a list of resolutions to
some of the problems you may be experiencing.

400 error for an unsupported API version

You should use the X-GitHub-Api-Version header to specify an API version. For example:

$ curl --header "X-GitHub-Api-Version:2022-11-28" https://api.github.com/zen

If you specify a version that does not exist, you will receive a 400 error.

For more information, see «API Versions.»

404 error for an existing repository

Typically, we send a 404 error when your client isn’t properly authenticated.
You might expect to see a 403 Forbidden in these cases. However, since we don’t
want to provide any information about private repositories, the API returns a
404 error instead.

To troubleshoot, ensure you’re authenticating correctly, your OAuth access token has the required scopes, third-party application restrictions are not blocking access, and that the token has not expired or been revoked.

Not all results returned

Most API calls accessing a list of resources (e.g., users, issues, etc.) support
pagination. If you’re making requests and receiving an incomplete set of results, you’re
probably only seeing the first page. You’ll need to request the remaining pages
in order to get more results.

It’s important to not try and guess the format of the pagination URL. Not every
API call uses the same structure. Instead, extract the pagination information from
the link header, which is returned with every request. For more information about pagination, see «Using pagination in the REST API.»

Basic authentication errors

On November 13, 2020 username and password authentication to the REST API and the OAuth Authorizations API were deprecated and no longer work.

Using username/password for basic authentication

If you’re using username and password for API calls, then they are no longer able to authenticate. For example:

curl -u my_user:my_password https://api.github.com/user/repos

Instead, use a personal access token when testing endpoints or doing local development:

curl -H 'Authorization: Bearer my_access_token' https://api.github.com/user/repos

For OAuth Apps, you should use the web application flow to generate an OAuth token to use in the API call’s header:

curl -H 'Authorization: Bearer my-oauth-token' https://api.github.com/user/repos

Timeouts

If GitHub takes more than 10 seconds to process an API request, GitHub will terminate the request and you will receive a timeout response.

In this article, I’ll be showing you how to create a custom error 404 page in GitHub Pages, a static site hosting service that allows you to publish and host your web pages through GitHub.

To break that down quickly: a static site is a website made up entirely of HTML, CSS, and JavaScript files. Everything the site needs to render is contained within these files, so there’s no need for server technology like PHP, Node.js, or Python. If the static site needs extra data from a server, it makes an asynchronous HTTP request with tools like fetch api or axios. And you’ll probably want to make sure that static site has a 404 page.

Displaying a 404 error page on your site is sort of like delivering bad news—the tone and manner of your delivery can determine if the person receiving the news will either be upset or be ready to agreeably look for another solution. Fortunately, GitHub Pages makes creating one a walk in the park.

How Does GitHub Pages Work?

Hosting your site on GitHub Pages is as easy as signing into GitHub and creating a new repository.

Your repo name should have the following format: <your github username>.github.io.

Add files to your repo. You can do this either by creating the files locally and pushing to remote or by creating the files directly on GitHub.

Go to the Settings tab of your newly created repository.

Scroll down to the GitHub Pages section.

Here, you can choose the branch you want to serve your pages from, the root directory, and even select a Jekyll theme. If you already have a custom domain name, you can add it here.

By adding a custom domain name, you can access your site using yourdomainname instead of your github.io domain.

That’s all! Your site is now ready to be published. Visit <your github username>.github.io to see your new website.

You can make changes to your site whenever you choose. They become available immediately after you push/merge to the branch you’ve chosen to serve your pages from.

Using GitHub Pages for your static site gives you some nice benefits:

• GitHub Pages is free to use. No coughing up extra cash just to host some basic web pages.
• You can use it to host websites like single-page applications or blogs.
• You can add a custom domain name to your site.
• You can enable HTTPS for your domain in just one click.
• You get the added advantage of managing your site with Git. Version-controlling your website becomes a piece of cake.

Why Is a 404 Page Important?

The 404 page is a famously dreaded sight across the internet. It’s a page that neither website users nor owners like to see, but it’s an unavoidable one. Its purpose is to inform a user that the page they’re looking for doesn’t exist.

Think about it: it isn’t every time you go into a store that you find everything you’re looking for. Certain items may be sold out or perhaps the store never sold them to begin with. That’s exactly what happens on the web. Perhaps the page’s URL changed, breaking an old link, or maybe the page was removed altogether. A user could have manually input the wrong URL to begin with. However a user has arrived at a particular URL, the requested web page doesn’t exist.

Specifically, 404 is an HTTP status code for a “Resource Not Found” or simply “Not Found” error. It applies to all kinds of resources on the web, including HTML files, CSS files, JavaScript files, documents, images, and just about any other file that could be requested from a server.

How you as the webmaster choose to convey a 404 error is very important. It can either improve your user’s experience on your site or make it worse.

What Makes a Good 404 Page?

At the end of the day, what’s on your 404 page is up to you, but I can give you a few tips to make it as palatable as possible for your users:

• First and foremost, a 404 page should return with an actual 404 HTTP status code. This is important so web crawlers like Google’s bot don’t incorrectly index an erroneous page as a valid page, as this can negatively impact your SEO.
• The 404 page should make it clear to the user that there’s a problem. This can be achieved by making the 404 or Not Found message prominent on the page.
• The page should offer a way out to the user. Unless you want the user stuck on your error page or want them to close your site immediately, your 404 page should provide them with a means to navigate away from the page. Add an obvious link to your site’s homepage to somewhere on the error page, or you can suggest links to pages that might be similar to what the user was looking for in the first place.
• You can provide a way for users to report a broken page, enabling you to quickly fix any issues.
• Add a search bar for users to find other things they might be looking for.
• Make the design pleasing to the eye. A 404 page is still a part of your website, so you should put as much thought into its design as you have for other valid pages. The page should carry elements of your brand, and not look like a desert island.

GitHub’s very own 404 page is a good example of what a 404 page should look like. The error code and message are both prominent on the page, and there’s a search bar to help you find other content.

If you don’t add a custom 404 page to your GitHub Pages site, then by default GitHub displays the following 404 page:

Not bad, eh? But not good enough for your brand.

How to Create a Custom 404 Page in GitHub Pages

Fortunately, GitHub also understands the importance of a 404 error page, and provides developers an easy way to add one to their GitHub-hosted pages. Let’s look at how you can add your own custom 404 page.

Create a new file in the root of your repository and name it 404.html.

Then go on to add content for the 404 page as follows:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Page Not Found</title><linkrel="preconnect"href="https://fonts.gstatic.com"><linkhref="https://fonts.googleapis.com/css2?family=Chango&family=Roboto:[email protected]&display=swap"rel="stylesheet"><style>        body{background-image:url("https://images.unsplash.com/photo-1616235132417-99f443954d2e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");background-size:cover;font-family:'Roboto','sans-serif';}        main{display:flex;height:100vh;justify-content:center;align-items:center;flex-direction:column;}        .header404{font-family:'Chango',cursive;font-size:48px;}        .content404{text-align:center;}</style></head><body><main><h4class="header404">404</h4><divclass="content-404">            Uh-oh! We couldn't find the page you are looking for.        </div><p><ahref="/">Check our home page</a></p></main></body></html>

Commit your changes, then try to visit a page that doesn’t exist on your site, eg,username.github.io/a-random-page-that-doesn't exist. A page like this should appear:

Conclusion

Hopefully, this article has shed some light on the importance of a 404 page and why you should put some effort into branding it as you would other pages of your website. When properly done, a 404 error page can be a good way to increase your website’s conversion rate.

Unlike many other host servers where you have to tinker with .htaccess or other kinds of configuration settings to handle 404 error pages, GitHub Pages makes it incredibly easy. All you need to do is add a single file, and you’re good to go.

If you’re stuck for ideas on what your 404 error page can look like, you can always look around for some 404 inspiration.

By Sodeeq Elusoji

Is your site not working after you’ve deployed to Github Pages?

You see a blank page, or maybe the homepage shows up fine, but then you click on a link and nothing happens. You pop up dev inspector only to find a bunch of 404 status codes.

It happens to many developers — the website works fine on localhost but after deploying to Github Pages, everything breaks.

By understanding the core problem, you will be able to spot it and prevent it from happening in all your future deployments, not just on Github Pages.

Let’s investigate the issue and make your site work as expected in production.

What are root-relative links?

To better understand why links often break when deploying to Github Pages, first we need to learn what root-relative links are.

Root-relative links^[1] are links that start with a forward slash (/). When clicked, a root-relative link ignores the path location of the current URL. Which part of an URL is the path? Everything that comes after the domain. The path of the following URL, for example, https://example.com/blog/articles is /blog/articles.

A root-relative link always leads to the same path within the current domain, regardless of where it is found. Consider the following examples:

<!--
	Root-relative links ignore the current URL and always lead
	to the same path within the current domain
-->

<!-- Current location: https://example.com/ -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

<!-- Current location: https://example.com/blog -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

<!-- Current location: https://example.com/blog/articles -->
<a href="/awesome-post"> <!-- leads to: https://example.com/awesome-post -->

Root-relative links and Github Pages

The inflexibility of root-relative links shows when we move a site to a different path location.

Suppose you have your articles hosted at https://example.com/<article-slug> and you decide to move them into a dedicated blog section on your website. Your articles are now found at https://example.com/blog/<article-slug>. If you were linking to another article from that page, say <a href="/awesome-post">, the link would lead to the old location https://example.com/awesome-post which doesn’t exist anymore.

Root-relative links ignore their current path and they don’t follow location changes.

The same thing happens when you develop your site locally and then deploy to Github Pages^[2]. The location of your site changes from root (/) to the project’s repository name:

Github Pages hosts your site at a location equal to the repository name

Everything on your site – including your assets such as images, CSS and JS files — is available at the new location. A link pointing to /awesome-article on localhost needs to lead to /my-project/awesome-article in production.

Prefix all links

To fix this issue, you have to prefix all links with the repository name of your project. Luckily, most static site generators and frameworks have an option to configure this during the build process so you won’t have to do this manually.

Gatsby

In Gatsby, you add a pathPrefix value to your gatsby-config.js:

// Configure Gatsby to prefix all links with the Github repository name
module.exports = {
  pathPrefix: '/my-project',
}

Then when you build the application, you add the --prefix-paths flag to the command like so:

gatsby build --prefix-paths

If you don’t add this flag, Gatsby will ignore the pathPrefix configuration and it will build your site as if it was hosted at the root path.

Documentation: https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/

Create React App

With Create React App, the configuration lies in the homepage property in your package.json file:

"homepage": "https://username.github.io/my-project",

Using this, Create React App will infer the location to use in the generated HTML.

If you’re using React Router v4 or higher, you need an additional configuration on any <Router> component to prefix your <Link>s. With <BrowserRouter> for example:

<BrowserRouter basename={process.env.PUBLIC_URL}>
  <Link to="/awesome-post">
</BrowserRouter>

Create React App will extract the path location from the homepage setting and make it available to you through the PUBLIC_URL environment variable.

Documentation: https://create-react-app.dev/docs/deployment/#building-for-relative-paths

Next.js

Update: With the release of Next.js 9.5, prefixing all links is much easier than it used to be. You can use the basePath configuration in your next.config.js file. If you’re using older versions of Next.js, you can follow the steps below.

In Next.js, you first add the assetPrefix configuration to the next.config.js file:

const pathPrefix = process.env.NODE_ENV === 'production'
  ? '/my-project'
  : '';

module.exports = {
  assetPrefix: pathPrefix,
  env: {
    pathPrefix,
  },
};

Additionally, you also need to assign the prefix to an environment variable so you can reuse it in your application. Unfortunately, Next.js doesn’t offer an easy way to add a prefix to your <Link> components. You’ll have to do this manually, and the best way is to create a <PrefixedLink> component and use it throughout the app.

import Link from 'next/link';

const PrefixedLink = ({ href, as = href, children, ...props }) => (
  <Link
    href={href}
    as={`${process.env.pathPrefix}${as}`}
    {...props}
  >
    {children}
  </Link>
);

export default PrefixedLink;

Replace all <Link> components in your application with <PrefixedLink> and you should be all set.

Documentation: https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

Vue

Prefixing your links with the repository name is quite straightforward in Vue. You need to set the correct publicPath in vue.config.js:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/' // note the trailing slash
    : '/',
};

The setting is applied in production only so it doesn’t break your development workflow on localhost.

Documentation: https://cli.vuejs.org/guide/deployment.html#github-pages

Why not use relative links?

You might be wondering — why aren’t we using relative links instead? A link such as <a href="awesome-post"> (without the forward slash /) will respect its current path location and will work even if you host your website several directories deep (/blog/articles/2020/...).

The downside of using relative links is that they break client-side routing relying on the HTML5 history API. You’re probably not using it directly, but React Router, Vue Router, Next.js and Gatsby all use it under the hood. Client-side routing is at the core of single-page applications and it’s what makes it possible to navigate to other pages without refreshing the browser.

If your website is not a single-page application and you don’t care about client-side routing, Create React App and Vue allow you to opt into relative links.